CSS 中3D效果实现

CSS 中3D效果实现

冯淑杰

(天津滨海职业学院人工智能学院  天津300451)

摘 要：在现代Web设计中，CSS 3D变换已经成为增强用户体验、打造沉浸式界面的重要手段。借助CSS的3D变换属性，我们可以轻松实现元素在三维空间中的旋转、移动、缩放等操作，从而创造出生动活泼、富有立体感的网页效果。本文将从基础知识出发，通过易于理解的概念解析和实战代码示例，带领大家走进CSS 3D变换的世界。

关键词：perspective透视；transform变形； translatez 移动

中图分类号：TP393.092 文献标识码： Ａ

1引言

3D动画常用于网页设计中，用于吸引用户的注意力，为网页带来更加丰富和生动的视觉体验。以前我们都是以javascript编辑，JavaScript 实现动画效果通常需要大量的代码来处理各种逻辑和事件，这使得代码结构相对复杂，不易于理解和维护。同时由于浏览器兼容性，代码编写不当或处理的逻辑过于复杂，可能会导致较高的性能开销，如果需求较为简单，对交互性要求不高，CSS 可能是更好的选择。

2 css中3D 效果的关键属性

3D动画效果展示只不过是对2D动画效果的延伸,简而言之就是将一个一维空间加入到二维空间内，组成三维空间[1]。2D动画进行定位、旋转、缩放的轴是我们头部与电脑屏幕连线所在的直线,而3D动画效果可以自定义旋转轴，然后进行相应的动画操作。

2.1 坐标

在 3D 变换中，使用 x、y 和 z 轴构成的三维坐标系，坐标轴 Ｘ、Ｙ、Ｚ 的三个方向分别表示左右、前后、上下 三个空间，三个空间进行运动形成视觉上的立体感。每个 3D 变换的元素的坐标系都是基于其父元素的坐标系，父元素的中心点就是 3D 坐标系的原点，动画的原点可根据当前元素的transform-origin 和 translatez 改变。

2.2 常用的transform函数：

CSS 的 transform 属性提供了在三维空间中对元素进行变换的能力。可以让网页开发人员不用再去书写繁杂的脚本，就能够直接让网页中的指定元素产生常见的变形效果。

transform属性允许你对元素进行旋转（‌rotate）‌、‌缩放（‌scale）、translate（移动）‌等操作，‌以创建3D效果[2]。‌例如，‌transform: rotateY(45deg)将使元素沿Y轴旋转45度；‌transform:translatez（20px）用于元素沿 z 轴向屏幕外平移20px，其效果类似于使元素在观察者的视线方向上靠近或远离。通过调整 translatez 的值，可以改变元素在 3D 空间中的深度位置。

2.3 CSS3中透视

图  perspective和translateZ的关系

2.3.1  perspective（透视）：学过绘画的人应该知道透视的原理，这个属性能让浏览器上形成3D效果，可以通过设置元素透视视锥体的距离来模拟真实世界的远近透视效果。

为了更好的理解perspective属性，我们通常把他和translateZ结合起来。perspective的值为人的眼睛到显示器的距离d，即视距，而translateZ就是3D物体距离源点的距离z，即物距，我们如图所示来解说perspective和translateZ的关系[3]。前面我们提过translatez用于元素在 z 轴方向上平移，这里要注意当元素移到屏幕背面时，z值为负数，当元素沿着Z轴向前移动的时候，与视点的距离变小，视点和元素的最高点和最低点所称角度最大，放大倍数越大，可以得出结论，视距越小放大效果越明显，物距越大放大效果越明显。当物距大于视距后，元素移动到视点后方，物距大于视距屏幕上无法呈像。

要使用perspective属性创建3D效果，需要遵循以下步骤：

(1)元素指定：需要确定哪些元素需要应用3D效果，可以是任何HTML元素，包括文本、图片或其他内容。

(2)perspective 的应用：写在父元素上perspective：800px；和写在子元素transform：perspective（800px）。如果页面只有一个元素两种方法的效果是一样的。如果是多个元素，以父元素为视点看所有子元素的效果就会发生变化。以子元素为视点，根据transform动画的变化来进行重新的渲染的效果是相同的。perspective的定义要在其他3D变幻属性之前，否则无效，这个也很好理解，确定好眼睛所在的位置才能计算元素在屏幕上的显示效果。

(3)3D效果呈现：元素要添加transform-style：preserver-3d，该属性定义该元素的子元素呈现效果，确保子元素能够在 3D 空间中进行定位和变换，而不是被扁平化到 2D 平面。

2.3.2  perspective-origin（透视原点）：是指观察者的视角相对于元素的位置，通过改变透视原点的位置，可以调整 3D 效果的观察角度。

perspective-origin是摄影机的中心点位置，预设相对应空间的中心点，不做设定的话预设都是center center (或50%50%)[4]，换句话说，作为摄影镜头的camera 的三个维度，perspective-origin 代表了X 和Y轴，而perspective代表Z 轴(和内容物体的Z轴相减才会变成摄影机的)，camera就可以在三维空间里头进行移动，perspective-origin所作的解释，当摄影镜头往上下左右移动时，同一个图形展示出来的效果时不同的。例如 perspective-origin: -100pxcenter; 表示将观察者的位置设置在 x 轴向左100px、y 轴在正中。

3、结束语

深入理解并熟练运用CSS 3D变换，不仅可以丰富网页设计的表现手法，而且可以为用户提供更为生动和有趣的浏览体验。通过不断实践和探索，你将能发掘更多CSS3D变换带来的可能性，将其融入到自己的Web设计作品中，创造出令人惊叹的立体视觉效果。

参考文献：

[1]顾岩，程奂翀，王震，等．基于OPCUA的3D实时监控 系统设计与实现[J]．系统仿真学报，2017,29(11):2767-2773．

[2]黑马程序员 .HTML5+CSS3 网页设计与制作 [M]. 北京： 人民邮电出版社,2020.

[3]大漠.图解CSS3:核心技术与案例实战[M]. 北京：机械工业出版社，2016

[4]吴丰 .HTML5+CSS3 Web 前端设计基础教程 [M]. 北京：人民邮电出版社，2020.