CSS3 3D空间转换

目标：使用transform属性实现元素在空间内的位移、旋转、缩放等效果

空间：是从坐标轴角度定义的。 x 、y 和z三条坐标轴构成一个立体空间，z轴与视线方向相同。

rotate3d(x,y,z,a)坐标

位移

1.空间：是从坐标轴角度定义的。 x 、y 和z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同。

2.空间转换也叫3D转换

3.属性：transform

语法

transform: translate3d(x, y, z);

transform: translateX(值);

transform: translateY(值);

transform: translateZ(值);

取值（正负均可）

1.像素单位数值

2.百分比

注意点：

Z轴 正值是向我们眼前走来，负值刚好相反

translate3d(x, y, z)可以像素，不能只写一个值，如果只需要z，x和y要写0，不能去掉

空间旋转

目标：使用rotate实现元素空间旋转效果

语法

transform: rotateZ / X / Y(值); // Z / X / Y轴3D旋转

transform:rotate3d(x,y,z,a) //X,Y,Z表示旋转轴X,Y,Z坐标方向的矢量、数值0~1,a就是旋转角度

左手法则 ：

判断旋转方向: 左手握住旋转轴, 拇指指向正值方向, 手指弯曲方向为旋转正值方向

透视

目标：使用perspective属性实现透视效果

1.思考：生活中，同一个物体，观察距离不同，视觉上有什么区别？

答：近大远小、近清楚远模糊

2.思考：默认情况下，为什么无法观察到Z轴位移效果？

答：Z轴是视线方向，移动效果应该是距离的远或近， 电脑屏幕是平面，默认无法观察远近效果

3.属性（添加给父级）

 perspective: 值;

取值：像素单位数值， 数值一般在800 – 1200。

作用： 空间转换时，为元素添加近大远小、近实远虚的视觉效果

注意点：

1.值越小，元素离我们的视觉越近

2.想要网页有3D效果，必须要加透视

3.要在父元素添加

4.透视的单位是像素px

立体呈现

思考：使用perspective透视属性能否呈现立体图形？

答：不能，perspective只增加近大远小、近实远虚的视觉效果

transform-style：指定嵌套元素是怎样在三维空间中呈现。

transform-style：preserve-3d(表示所有子元素在3D空间中显示) / flat(表示所有子元素在2D空间中显示)

注意点：

1.要在父元素添加，但是影响的是子元素

空间缩放

语法

transform: scaleX(倍数);

transform: scaleY(倍数);

transform: scaleZ(倍数);

transform: scale3d(x, y, z);

注意点：如果想让一个元素有3d效果

1.可以添加透视：persperctive:值

2.仅仅添加透视，只是从正前言观察，可以看到近大远小的效果

3.如果想从侧面观察，可以添加transform:rotate3d改变观察的角度

4.前面三个并不能真正的生成 3d 效果，如果需要3d效果，还需要为父容器设置 transform-style:preserve-3d