3D转化【复合属性】
左手法则表示3D坐标系：
1. 大拇指指向的方向就是 X 轴的正方向
2. 中指指向的方向就是 Y 轴的正方向
3. 食指指向的方向就是 Z 轴的正方向
沿着X轴位移（水平位移）
语法：
transform: translateX(值);
例如：
div {
width: 200px;
height: 200px;
background-color: red;
transform: translateX(200px);
}
总结：
1. translateX代表元素沿着水平方向位移
2. 正数代表水平向右移动
3. 负数代表水平向左移动
4. 可以设置百分比，相对当前元素自身的宽度
沿着Y轴位移
语法：
transform: translateY(值);
例如：
div {
width: 200px;
height: 200px;
background-color: red;
transform: translateY(200px);
}
总结：
1.translateY 代表元素沿着垂直方向位移
2.正数代表垂直向下移动
3.负数代表垂直向上移动
4.可以设置百分比，相对元素自身的高度
沿着Z轴位移
语法：
transform: translateZ(值);
例如：
body {
/*透视*/
perspective: 1000px;
}
div {
width: 200px;
height: 200px;
background-color: red;
transform: translateZ(200px);
}
总结：
1. transform: translateZ 代表沿着Z轴移动
2. 正数朝向我们移动
3. 负数背向我们移动
4. 不能设置百分比
透视perspective介绍
作用： 网页中实现近大远小效果的属性
设置方式： 给设置了transform属性元素的父元素设置
取值范围： 推荐 600 - 1000 之间
3D转化旋转
沿着X轴旋转
语法：
transform: rotateX(值)
备注：
1. rotateX中的值的单位表示角度，使用deg表示
例如：
div {
width: 200px;
height: 200px;
border: 1px solid red;
transform: rotateX(30deg);
}
总结：
1. rotateX 代表元素绕着X轴旋转
2. 可以设置正数或负数
3. 通过transform-origin修改旋转轴的位置
沿着Y轴旋转
语法：
transform: rotateY(值)
备注：
1. rotateY中的值的单位表示角度，使用deg表示
例如：
div {
width: 200px;
height: 200px;
border: 1px solid red;
transform: rotateY(30deg);
}
总结：
1. rotateY 代表元素绕着Y轴旋转
2. 可以设置正数或负数
沿着Z轴旋转
语法：
transform: rotateZ(值)
备注：
1. rotateZ中的值的单位表示角度，使用deg表示
例如：
div {
width: 200px;
height: 200px;
border: 1px solid red;
transform: rotateZ(30deg);
}
总结：
1. rotateZ 代表元素绕着Z轴旋转
2. 可以设置正数或负数
3. 通过transform-origin修改旋转轴的位置
3D旋转轴的改变
2D旋转，主要元素是绕着点在旋转，所以在2d转化中通过transform-origin改变的是旋转圆点的位置
3D旋转，主要元素是绕着轴在旋转，所以3d转化中也是通过transform-origin改变的是旋转轴的位置
3D转化缩放
沿着X轴缩放
语法：
transform: scaleX(值);
备注：
1. scaleX中的值代表的是倍数，倍数是相对当前元素的宽度，不需要设置单位
2. 不能设置负数
例如：
div {
width: 200px;
height: 200px;
/*元素最后的宽度是400，是在原来200宽度的基础上扩大了2倍*/
transform: scaleX(2);
}
总结：
1. scaleX 代表的是元素宽度扩大或缩小对应的倍数
2. 大于1，代表放大倍数
3. 大于0小于1,代表缩小倍数
4. 等于1，大小不变
5. 等于0，宽度为0
沿着Y轴缩放
语法：
transform: scaleY(值);
备注：
1. scaleY中的值代表的是倍数，不需要设置单位
2. 不能设置负数
例如：
div {
width: 200px;
height: 200px;
/*元素最后的高度是400，是在原来200高度的基础上扩大了2倍*/
transform: scaleY(2);
}
总结：
1. scaleY 代表的是元素高度扩大或缩小对应的倍数
2. 大于1，代表放大倍数
3. 大于0小于1,代表缩小倍数
4. 等于1，大小不变
5. 等于0，宽度为0
将平面图形转化为立体图形
transform-style: preserve-3d;
设置了该属性后，不需要再给元素设置透视的属性了。
网友评论