前言 在css3中允许使用3D转换来对元素进行格式化，在原本只是2D转化的平面中引入了Z轴。在这之前我们讲解了css3中的2D转换，也就是二维空间变换，本篇的3D转换就是基于原来的2D转换
前言在css3中允许使用3D转换来对元素进行格式化，在原本只是2D转化的平面中引入了Z轴。在这之前我们讲解了css3中的2D转换，也就是二维空间变换，本篇的3D转换就是基于原来的2D转换而来，与2D转换的功能相似。 三维坐标系相信学过数学的效果版对这一概念多多少少是知道的，我们要想有一个3D空间效果，也就是立体空间感，比如：正方体、长方体.....再比如我们生活所居住的房间也是3D立体空间的，主要有X轴、Y轴Z轴共同组成
x轴 ： 水平向右，x右边是正值，左边是负值。 y轴 ： 垂直向下，y下面是正值，上面是负值。 z轴 ： 垂直屏幕，往外面是正值，往里面是负值。 转换属性
这里transform属性和transform-origin属性在前一篇《有趣的transform形变》中已经讲解了，这里就不再细说。不同的是在3D转换中，transform-origin属性会接收第三个值，表示Z轴方向位置 （1）transform-style transform-style设置元素的子元素是位于 3D 空间中还是平面中。 语法：
flat：设置元素的子元素位于该元素的平面中（子元素不设置3D空间）
设置flat值，子元素就只位于平面中，效果如下：
preserve-3d：设置元素的子元素应用于3D空间中 基于上述栗子，将transform-style属性值改为preserve-3d：
得到3D空间效果：
3D视觉是不是感觉一下就来啦~ （2）perspective perspective指定了观察者与 z=0 平面的距离，使具有三维位置变换的元素产生透视效果。如果不指定透视，则Z轴空间中的所有点将平铺到同一个2D视平面中，并且变换结果中将不存在景深概念 z>0 的三维元素比正常大，而 z<0 时则比正常小，大小程度由该属性的值决定 “perspective”本身就具有透视的意思，就是设置用于户和元素3D空间Z平面之间的距离（视距），简单理解就是将电脑屏幕当做一个平面，用户眼睛到屏幕的垂直方向。值越大用户与屏幕距离越远，视觉效果很小，值越小3D效果就越明显。
语法：
这里还是以上述栗子进行演示：
或者
只要设置在父盒子上就可以，效果如下：
从第一眼就可以看出与上面不同，没有设置景深是这样：
设置了景深是这样的：
注意：perspective属性只影响 3D 转换元素，并且同时使用perspective-origin属性，可以改变 3D 元素的底部位置 （3）perspective-orgin perspective-origin 属性定义 3D 元素所基于的 X 轴和 Y 轴。该属性允许您改变 3D 元素的底部位置。 语法：
x-position：指定消失点的横坐标，其值有以下形式： <length-percentage>长度值或相对于元素宽度的百分比值，可为负值。
y-position：指定消失点的纵坐标，其值有以下形式：
介绍完语法使用，我们知道了怎么取值，下面还是基于上述例子继续演示： 值为长度值：
效果如下：
值为关键字：
效果如下：
值为百分比：
效果如下：
两个值：
效果如下：
（4）backface-visibility backface-visibility指定当元素背面朝向观察者时是否可见 元素的背面是其正面的镜像，虽然在 2D 中不可见，但是当变换导致元素在 3D 空间中旋转时，背面可以变得可见。 （此属性对 2D 变换没有影响，它没有透视。） 语法：
这里借鉴了MDN上面的例子：
3D转换旋转单位：deg(角度)、rad(弧度)、grad(梯度)、turn(圈)
（1）3D位移 3D位移在2D基础上多加了一个可以z轴移动的方向 3D位移主要演示translateZ和translate3d两个属性： translate3d()CSS 函数在3D空间内移动一个元素的位置，这个移动由一个三维向量来表达，分别表示他在三个方向上移动的距离
效果如下：
注意：
（2）3D旋转
旋转量由角度决定，角度为正则顺时针旋转，反之逆时针旋转
X轴旋转效果：
Y轴旋转效果：
Z轴旋转效果：
这里单独将rotate3d函数拎出来讲 语法：
取值分析：
也就是说rotateX(a) === rotate3d(1,0,0,a)、rotateY(a) === rotate3d(0,1,0,a)、rotateZ(a) === rotate3d(0,0,1,a)
效果如下：
效果如下：
综合案例基于上述所学内容，我们来实操做一个3D盒子旋转： html结构：
css部分：
效果如下
|
2021-04-14
2021-04-29
2018-01-07
2022-06-10
2021-09-30
