这是我参与11月更文挑战的第11天，活动详情查看：2021最后一次更文挑战
css 3D
CSS 3D变换函数包括translateX()、translateY()和translateZ()，其中translateX()和translateY()属于2D变化，而translateZ()属于3D变换，其中CSS缩放变换函数包括scaleX()、scaleY()和scaleZ(),scaleZ属于3D变化，而scaleX()和scaleY()属于2D变换。CSS3D斜切变换没有3D函数，也就是说skewZ函数是不存在的，自然也不存在skew3d()函数。rotateX()、rotateY()和rotateZ()都属于3D变换。
3D中还有perspective属性，perspective属性决定了看到的画面是二维还是三维的。我们也可以通过translateZ()函数来控制元素在视觉上的远近距离，如果我们设置容器元素的perspective属性值为155px;
.warpper {
perspective: 155px;
}
其中会有几种情况：
当我们给子元素设置的translateZ()函数值越小，我们就会看到子元素的视觉大小越小，同理当我们设置子元素的函数值越大，我们看到的子元素的视觉就会越小。同理我们可以得到越大则视觉大。
当我们设置的translateZ()的值超过了我们设置的大小，我们就发现我们看不到该元素了。
perspective透视点有两种写法，一种是设置在3D渲染元素的共同父元素上；一种是设置在当前3D渲染元素上。
//第一种
.wrapper {
perspective: 254px;
}
//第二种
.wrapper1 {
transform: perspective(254px) rotateX(22deg);
}
perspective-origin语法是perspective-origin:<position>,属性的初始值是50% 50%，表示默认的透视点是舞台或元素的中心。但是如果我们需要设置变换元素不在舞台中心或者透视角偏上或者偏下，我们就可以设置perspective-origin属性值。
当我们设置perspective-origin：25% 75%就是一个立方体应用效果图。
transform-style: preserve-3d支持两个关键属性值，flat和preserve-3d,项目中我们可以这样书写：、
transform-style: preserve-3d;
transform-style: flat;
flat是默认值在3D变换的元素位于舞台或元素的平面上，把三维空间压缩在舞台元素的二维空间中。
preserve-3d应用于3D变换元素位于三维空间中，更加接近3D的表现形式。
backface-visibility属性语法可以接收hidden和visible两个值，其中默认值为visible，表示元素翻转时背面时可见的，而hidden表示元素翻转时背面时不可见的。
3D变换除了用来实现3D效果，还可以用来开启GPU加速。transform: translate(5px, 0)或者transform: translate3d(-55px, 0, 0),使用时因为该函数会开启GPU加速，所以translate3d()函数的变换效果性能更高。2D旋转性能本来很高，所以不需要去开启GPU加速，因为GPU的加速会增加移动设备电池寿命和内存的使用。所以我们在2D变换中尽可能使用2D函数，不去使用3D来进行GPU加速。
