3D轉(zhuǎn)化【復合屬性】
左手法則表示3D坐標系：
1. 大拇指指向的方向就是 X 軸的正方向
2. 中指指向的方向就是 Y 軸的正方向
3. 食指指向的方向就是? Z 軸的正方向
沿著X軸位移（水平位移）
語法：
transform: translateX(值);
例如：
? ? div {
width: 200px;
? ? ? ? height: 200px;
? ? ? ? background-color: red;
? ? ? ? transform: translateX(200px);
? ? }
總結(jié)：
1. translateX代表元素沿著水平方向位移
2. 正數(shù)代表水平向右移動
3. 負數(shù)代表水平向左移動
4. 可以設置百分比，相對當前元素自身的寬度
沿著Y軸位移
語法：
? transform: translateY(值);
例如：
div {
width: 200px;
? ? ? ? height: 200px;
? ? ? ? background-color: red;
? ? ? ? transform: translateY(200px);
? ? }
總結(jié)：
1.translateY 代表元素沿著垂直方向位移
2.正數(shù)代表垂直向下移動
3.負數(shù)代表垂直向上移動
4.可以設置百分比，相對元素自身的高度
沿著Z軸位移
語法：
? transform: translateZ(值);
例如：
? ? body {
? ? ? ? /*透視*/
perspective: 1000px;
? ? }
div {
width: 200px;
? ? ? ? height: 200px;
? ? ? ? background-color: red;
? ? ? ? transform: translateZ(200px);
? ? }
總結(jié)：
1. transform: translateZ 代表沿著Z軸移動
2. 正數(shù)朝向我們移動
3. 負數(shù)背向我們移動
4. 不能設置百分比
透視perspective介紹
作用： 網(wǎng)頁中實現(xiàn)近大遠小效果的屬性
設置方式： 給設置了transform屬性元素的父元素設置
取值范圍： 推薦 600 - 1000 之間
3D轉(zhuǎn)化旋轉(zhuǎn)
沿著X軸旋轉(zhuǎn)
語法：
? transform: rotateX(值)
備注：
1. rotateX中的值的單位表示角度，使用deg表示
例如：
? ? div {
width: 200px;
? ? ? ? height: 200px;
? ? ? ? border: 1px solid red;
? ? ? ? transform: rotateX(30deg);
? ? }
總結(jié)：
1. rotateX 代表元素繞著X軸旋轉(zhuǎn)
2. 可以設置正數(shù)或負數(shù)
3. 通過transform-origin修改旋轉(zhuǎn)軸的位置
沿著Y軸旋轉(zhuǎn)
語法：
? transform: rotateY(值)
備注：
1. rotateY中的值的單位表示角度，使用deg表示
例如：
? ? div {
width: 200px;
? ? ? ? height: 200px;
? ? ? ? border: 1px solid red;
? ? ? ? transform: rotateY(30deg);
? ? }
總結(jié)：
1. rotateY 代表元素繞著Y軸旋轉(zhuǎn)
2. 可以設置正數(shù)或負數(shù)
沿著Z軸旋轉(zhuǎn)
語法：
? transform: rotateZ(值)
備注：
1. rotateZ中的值的單位表示角度，使用deg表示
例如：
? ? div {
width: 200px;
? ? ? ? height: 200px;
? ? ? ? border: 1px solid red;
? ? ? ? transform: rotateZ(30deg);
? ? }
總結(jié)：
1. rotateZ 代表元素繞著Z軸旋轉(zhuǎn)
2. 可以設置正數(shù)或負數(shù)
3. 通過transform-origin修改旋轉(zhuǎn)軸的位置
3D旋轉(zhuǎn)軸的改變
2D旋轉(zhuǎn)，主要元素是繞著點在旋轉(zhuǎn)，所以在2d轉(zhuǎn)化中通過transform-origin改變的是旋轉(zhuǎn)圓點的位置
3D旋轉(zhuǎn)，主要元素是繞著軸在旋轉(zhuǎn)，所以3d轉(zhuǎn)化中也是通過transform-origin改變的是旋轉(zhuǎn)軸的位置
3D轉(zhuǎn)化縮放
沿著X軸縮放
語法：
? transform: scaleX(值);
備注：
? 1. scaleX中的值代表的是倍數(shù)，倍數(shù)是相對當前元素的寬度，不需要設置單位
? 2. 不能設置負數(shù)
例如：
? ? div {
width: 200px;
? ? ? ? height: 200px;
? ? ? ? /*元素最后的寬度是400，是在原來200寬度的基礎上擴大了2倍*/
? ? ? ? transform: scaleX(2);
? ? }
總結(jié)：
1. scaleX 代表的是元素寬度擴大或縮小對應的倍數(shù)
2. 大于1，代表放大倍數(shù)
3. 大于0小于1,代表縮小倍數(shù)
4. 等于1，大小不變
5. 等于0，寬度為0
沿著Y軸縮放
語法：
? transform: scaleY(值);
備注：
? 1. scaleY中的值代表的是倍數(shù)，不需要設置單位
? 2. 不能設置負數(shù)
例如：
? ? div {
width: 200px;
? ? ? ? height: 200px;
? ? ? ? /*元素最后的高度是400，是在原來200高度的基礎上擴大了2倍*/
? ? ? ? transform: scaleY(2);
? ? }
總結(jié)：
1. scaleY 代表的是元素高度擴大或縮小對應的倍數(shù)
2. 大于1，代表放大倍數(shù)
3. 大于0小于1,代表縮小倍數(shù)
4. 等于1，大小不變
5. 等于0，寬度為0
將平面圖形轉(zhuǎn)化為立體圖形
transform-style: preserve-3d;
設置了該屬性后，不需要再給元素設置透視的屬性了。
