整体实现思路介绍

整个案例使用到CSS3 和 HTML技术， 案例的核心知识点 使用到了 CSS3 中的透视 、3D变换、 动画 、无缝滚动等技术要点， 下面我会逐一进行介绍

• 知识点1: 一镜到底特效的 案例的整体布局、设计、及动画思路

• 知识点2：CSS3中的3D坐标系

• 知识点3：CSS3中的3D变换及案例应用

• 知识点4：CSS3中的3D透视及案例应用

• 知识点5：CSS3中的 透视及3d变换的异同点

• 知识点6：CSS3中的 动画及案例应用

1、一镜到底特效 的整体布局、设计、及动画思路

如下图所示，一镜到底的案例特效 最核心的就是要 构成一套 在3D 空间中， 有多个平行的场景， 然后以摄像机的视角  从前往后 移动，在场景中穿梭， 依次穿过每一个场景的页面即可，自己闭上眼睛来体会一下吧。

对应到本案例中效果就是这样啦：

当然有朋友会说看上图，感觉不到明显的3D 立体效果， 那再来看看下面这个图吧；

上面这张图就是 基于人眼 看不同距离的物体呈现出的结果， 也就是透视效果， 透视效果最核心的特点就是近大远小；而影响看到透视物体大小的一个参数就是消失点距离， 比如消失点越近，最远处的物体会越小， 近大远小的效果越明显， 自己闭上眼睛来体会一下吧。

对应到本案例中效果就是这样啦：

注意：本案例中 的主要功能是动效， 所以在页面框架布局上，大多使用的都是定位布局， 布局中的基础概念 ‘子绝父相’ 就不用我多说了吧

上述框架对应的HTML源码如下, 其中.sence-in 内部的子元素是素材，可以先忽略：

知识点一： CSS3中的坐标系

CSS3中的坐标系，是一切3D 效果的基石， 务必熟练掌握 ， 如下图所示：

• x轴坐标：左边负，右边正

• y轴坐标：上边负，下边正

• z轴坐标：里面负，外面正

• 注意： 坐标系的原点在 浏览器的左上角

知识点二： 透视(perspective)

perspective属性定义了观察者和Z=0平面之间的距离，从而为3D转换元素创建透视效果。上面也说了， 透视的效果就是 近大远小， 上面的截图中也能看到 。这个属性是用来创建3D转换效果的必要属性，因为当我们进行旋转或其他3D转换时，如果透视效果设置得不正确，元素可能会显得很奇怪或不正常。 透视的语法如下：

在CSS中，我们可以通过在父元素上设置perspective属性来控制子元素的3D效果。例如：

.container {  

  perspective: 1000px;  

}

在这个例子中，我们为.container元素设置了perspective属性，值为1000px。这意味着任何在这个元素内部的3D转换都会基于这个视距进行透视。

知识点三：3D 变换的核心属性： transform-style

transform-style属性决定了是否保留元素的三维空间布局。当设置为preserve-3d时，它会保留元素内部的三维空间，即使这个元素本身没有进行任何3D转换。这使得子元素可以相对于父元素进行旋转或其他3D转换，而不会影响其他元素。在我们的案例截图中 也能看出在父元素设置了 transform-style: preserve-3d;属性后， 各个场景在 Z轴方向上，已经有了前后距离上的差异了。  需要注意的点就是， transform-style属性一定要设置给发生3D变换元素的父元素

例如：

 /* 透视属性加给了 最外层的元素， 保证所有子元素的透视效果是一致的，协调的*/

.perspective-box {  

  transform-style: preserve-3d;  

}

在这个例子中，我们为.perspective-box元素设置了transform-style属性为preserve-3d，这意味着任何在这个元素内部的3D转换都会保留其三维空间布局。

• 小技巧：如果你希望自己做的3D场景，立体效果很真实的话， 可以尽量多的给不同的元素，设置在Z轴方向上 设置不同的偏移量， 这样的效果是 摄像机在穿梭的过程中，每一段距离都能看到不同的风景， 层次感会很强， 当然也不要太疯狂， 不然场景会变得混乱哦

知识点四、perspective和transform-style的差异和注意点(炒鸡重要！)

• perspective属性定义了观察者和Z=0平面之间的距离，通俗的说 就是屏幕 到消失点的距离，从而影响3D元素的透视效果, 而transform-style属性决定了是否保留元素的三维空间布局

• 当我们只使用perspective属性时，只有被明确设置为3D转换的元素才会显示透视效果。而当我们使用transform-style: preserve-3d时，即使元素本身没有进行任何3D转换，其子元素也可以进行3D转换并保留三维空间布局。

注意：perspective属性，只能带来近大远小的透视视觉效果，并不能构成真正的3D空间布局。真正的3D布局必须依赖于transform-style: preserve-3d属性来实现

知识点五、animation动画的定义和使用

CSS动画是一种使元素从一种样式逐渐改变为另一种样式的方法。这个过程是通过关键帧（keyframes）来定义的，关键帧定义了动画过程中的不同状态。 在一镜到底的案例中， 整个场景的前后移动，用的就是动画属性。

动画的使用分为两步， 具体使用方式如下：

• 1.使用@keyframes 来定义动画

• 2.使用animation属性来调用动画，

@keyframes rotate {  

  from { transform: rotateX(0deg); }  

  to { transform: rotateX(360deg); }  

}

在这个例子中，我们定义了一个名为“rotate”的关键帧动画，使元素从X轴的0度旋转到360度。然后，我们可以通过将这个动画应用到HTML元素上来使用它：

.perspective-content {  

  animation: rotate 5s infinite linear;  

}

在这个例子中，我们将“rotate”动画应用到.cube元素上，设置动画时间为5秒，无限循环，并且线性过渡;

在一镜到底的案例中， 我们定义的动画如下：

上午动画 其实做了一个无线循环轮播的逻辑， 就是当 在Z轴方向上 从 0 移动到 6000距离以后， 在重置到-6000px, 这样就可以在从-6000继续向前移动， 移动到 0 ，达到一个循环， 再开始下一次的循环；

• 小技巧： 你可以把动画 单独加给每个场景（可能有10多个子元素， 你的重复写10多遍，会很麻烦的），也可以把动画加给公共的父元素，父元素会带着里面的子元素一起动， 这样只用写一次就行哦。

作者：IT大春哥
链接：https://juejin.cn/post/7325739662033879090
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。