空间（3D）转换：使用transform属性实现元素在空间内的位移、旋转、缩放等效果

空间转换

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

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

空间转换也叫3D转换

属性：transform

浏览器支持

1.1 空间位移

目标：使用translate实现元素空间位移效果

语法

	**transform: translate3d(x, y, z);** 
	transform: translateX(值); 
	transform: translateY(值); 
	**transform: translateZ(值);** 

取值（正负均可）

• 像素单位数值
• 百分比

​

1.2 透视

目标：使用perspective属性实现近大远小效果

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

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

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

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

透视距离也称为视距，所谓的视距就是透视距离也称为视距，所谓的视距就是人的眼睛到屏幕的距离。

属性（添加给父级）

perspective: 值;

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

案例，盒子沿着Z轴移动 添加透视的效果

2.1 空间旋转

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

语法

	transform: **rotateZ**(值);
	transform: **rotateX**(值);
	transform: **rotateY**(值);

1. X轴旋转示例：

.box {
   
            width: 300px;
            margin: 100px auto;
        }

        img {
   
            width: 300px;
            transition: all 2s;
        }

        .box {
   
            /* 透视效果：近大远小，近实远虚 */
            perspective: 1000px;
        }

        .box img:hover {
   
            transform: rotateX(60deg);
        }

	<div class="box">
        <img src="./images/pic.jpeg" alt="">
    </div>

2. Y轴旋转示例：
   

 .box {
   
             width: 300px;
             margin: 100px auto;
         }
 
         img {
   
             width: 300px;
             transition: all 2s;
         }
 
         .box {
   
             /* 透视效果：近大远小，近实远虚 */
             perspective: 1000px;
         }
 
         .box img:hover {
   
             transform: rotateY(-60deg);
         }
 
 	<div class="box">
         <img src="./images/pic.jpeg" alt="">
     </div>

3. Z旋转示例
   

		.box {
   
            width: 300px;
            margin: 100px auto;
        }

        img {
   
            width: 300px;
            transition: all 2s;
        }

        .box img:hover {
   
            transform: rotateZ(360deg);
        }
		<div class="box">
        	<img src="./images/pic.jpeg" alt="">
    	</div>

左手法则

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

拓展 ：

	rotate3d(x, y, z, 角度度数) ：用来设置自定义旋转轴的位置及旋转的角度 
	x，y，z 取值为数字（不带单位）