开启网页3D效果之旅 | simmyo_z的博客

上古时代，当html语言和http协议刚被发明出来时，这些专家们也许怎么也想不到，当初发明来共享文本的技术如今统治了几乎整个互联网行业。当第一个网页被打开时，上面只有简陋的一个表单，甚至做一个简单的过渡变色效果，都要借用java Applet，后来要借助javascript。短短十几年过去，现在有了css3，你只需定义简单的transition,就可以实现各种神奇的过渡效果。

本文不是介绍css3动画以及用法的，因此需要读者预先了transition,transform等属性。

###　回顾下CSS3的基础属性

¶1.transition

Transition是被用到最多的也是最简单的CSS3动画类型，如果你想实现鼠标划过更改背景色的功能，用transition是最简单的方式。

<button>会变色的按钮</button>

button {
  transition: all 0.8s ease;
  background-color: red;
}
button:hover {
  background-color: #eeeeee;
}

下面是效果：

transition CSS 属性是 transition-property，transition-duration，transition-timing-function 和 transition-delay 的一个简写属性。分别是可变换属性，持续时间，变换的过度函数(就是变换的加速度曲线)，效果生效的延时。

关于Transition的更多API，请查看MDN的文档。

¶2.transform

transform是执行元素旋转，缩放，位移，倾斜的css属性，它是通过修改视觉上的坐标空间实现的。

⚠️ 只能转换盒子模型定位的元素。

• 旋转
  rotate(a)
  a 是一种，表示旋转的角度，比如30deg。 正角度表示了顺时针的旋转，负角度表示逆时针的旋转。

<div>正常</div>
<div class="rotated">旋转45度</div>
<div class="rotated2">旋转90度</div>

div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.rotated {
  transform: rotate(45deg);
  background-color: pink;
}
.rotated2 {
  transform: rotate(90deg);
  background-color: blue;
  color: #ffffff;
}

• 缩放
  scale(a,b,c)
  单一数值
  单一的数值即指定了一个缩放系数，同时作用于 X 轴和 Y 轴让该元素进行缩放，相当于指定了单个值的 scale()(2D 缩放)函数。
  两个长度/百分比值
  两个数值即分别指定了 2D 比例的 X 轴和 Y 轴的缩放系数，相当于指定了两个值的 scale()（2D 缩放）函数。
  三个长度/百分比值
  三个数值即分别指定了 3D 比例的 X 轴、Y 轴和 Z 轴的缩放系数. 相当于一个 scale3d()函数。
  none
  指定不进行缩放。

<div>正常</div>
<div class="scale">大2倍</div>
<div class="scale2">水平1.5倍，垂直2倍</div>

div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
  text-align: center;
  transform-origin: 0 0;
}
.scale {
  transform: scale(2);
  background-color: pink;
}
.scale2 {
  transform: scale(1.5, 2);
  background-color: blue;
  color: #ffffff;
}

• 位移
  translate(x,y)
  x,y 分别是 x,y 轴移动的距离。

<div>正常</div>
<div class="translate">右，下移30px</div>

div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
  text-align: center;
  transform-origin: 0 0;
}
.translate {
  transform: translate(30px, 30px);
  background-color: pink;
}

• 倾斜

skew(x-angle,y-angle)
定义沿着 X 和 Y 轴的 2D 倾斜转换。

<div>Normal</div>
<div class="skewed">Skewed</div>

div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.skewed {
  transform: skew(10deg); /* Equal to skewX(10deg) */
  background-color: pink;
}

¶3.animation

我们可以把transition和transform 结合在一起使用，就实现动感十足的 html 页面。
但是，transition只能实现开始和结束的状态，并且只能“动一次”。

还有更加强大的animation属性，可以制作不间断，存在中间状态的动画。

💥 这里穿插介绍一个animation动画库，https://daneden.github.io/animate.css/

animate.css里面实现了很多常见的淡入淡出，方向移动的动画，可以看下源码，然后自己实现动画的时候就有头绪了。

下面是一个简单的 fadeout 效果的源代码

@keyframes fadeOutDown {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
}

点击animate.css官网可以查看更多的效果哦。

理论上，任何单独的css属性都可以拿来做动画，但是注意一点🙉从无到有，不要用display:none,应该用opacity属性。

然后是animate的属性，CSS animation 属性是 animation-name，animation-duration, animation-timing-function，animation-delay，animation-iteration-count，animation-direction，animation-fill-mode 和 animation-play-state 属性的一个简写属性形式。

这里不一一介绍了。

¶进入主题–transform的3D效果

☑️ 网页的3D坐标系：

如上图，网格就是网页的坐标系。有了这张图，就可以很轻松的想到如何运用css的属性得到想要的效果。

¶1.如何使用3d

transform的translate,scale,rotate都有3D效果。

translate3d(x,y,z)	定义 3D 转化。
translateX(x)	定义 3D 转化，仅使用用于 X 轴的值。
translateY(y)	定义 3D 转化，仅使用用于 Y 轴的值。
translateZ(z)	定义 3D 转化，仅使用用于 Z 轴的值。

scale3d(x,y,z)	定义 3D 缩放转换。
scaleX(x)	定义 3D 缩放转换，通过给定一个 X 轴的值。
scaleY(y)	定义 3D 缩放转换，通过给定一个 Y 轴的值。
scaleZ(z)	定义 3D 缩放转换，通过给定一个 Z 轴的值。

rotate3d(x,y,z,angle)	定义 3D 旋转。
rotateX(angle)	定义沿 X 轴的 3D 旋转。
rotateY(angle)	定义沿 Y 轴的 3D 旋转。
rotateZ(angle)	定义沿 Z 轴的 3D 旋转。

也可以用

属性	定义
matrix3d(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n)	定义 3D 转换，使用 16 个值的 4x4 矩阵。

下面是 3D 变换的例子

上面可以看出来，div脱离了平面，但是效果却仿佛还是平面的，因为我们缺少定义了一个关键的属性：

🏷persspective给元素加上3D透视(近大远小)的效果。

transform: perspective(600px); // 加在子元素上，给单个元素添加透视
/**或者**/
perspective: 600px; // 加在父元素上，所有的子元素共享一个3D空间

看上面的例子，我们可以看出，给单个元素添加，每个元素都有自己的透视空间。

🏷perspective-orgin默认的变换点都是元素的中心点，如果你想以其他的位置为变换点，那就可以用这个属性来做调整。

就像transform-origin在 2D 变换里面设置变换中心点一样。也可以认为是元素的底部位置。

🏷transform-style这个参数用来共享父元素的 3D 空间。

值	描述
flat	表示所有子元素在 2D 平面呈现。
preserve-3d	表示所有子元素在 3D 空间中呈现。

🏷backface-visibility可用于隐藏内容的背面。默认情况下，背面可见，这意味着即使在翻转后，变换的内容仍然可见。但当 backface-visibility 设置为 hidden 时，旋转后内容将隐藏，因为旋转后正面将不再可见。

¶2.3d和硬件加速

动画卡顿是在移动 web 开发时经常遇到的问题，解决这个问题一般会用到css3 硬件加速。

❔什么是硬件加速？

DOM 树和 CSS 结合后形成渲染树。渲染树中包含了大量的渲染元素，每一个渲染元素会被分到一个图层中，每个图层又会被加载到 GPU 形成渲染纹理。GPU 中 transform 是不会触发 repaint 的，这一点非常类似 3D 绘图功能，最终这些使用 transform 的图层都会由[独立的合成器进程进行处理]。https://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome

因此，最简单的开启硬件加速的方法就是设置translateZ(0)。

但是，开启硬件加速后，会加快用电，并且不合适的使用硬件加速，会造成页面卡顿。

参考：https://div.io/topic/1348 看下index属性造成不该在复合层（composited layer）中的元素造成页面卡顿的例子。

¶3. 3d动画的一个实例

利用translate 和 rotate 制作的一个骰子。

代码来源：

https://www.cnblogs.com/zhangnan35/p/10709876.html

参考：

https://www.jianshu.com/p/f8b1d6e598db

http://beiyuu.com/css3-animation

https://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome