20.5.3D變換transform（3D） · HTML+CSS學習筆記

## 20.5.1.基本概念 3D變換是在2D變換的基礎上，再加上一個維度（z軸），構成了三維空間。新加上的這個z軸，是跟網頁頁面（電腦屏幕）垂直的那個方向，也就是眼睛到屏幕的“垂直線”。 z軸的正方向是從屏幕到眼睛的方向，如下圖所示： ![](https://img.kancloud.cn/e7/5c/e75c4139ede18ed3a758cdca188e4179_421x250.png) 這就相當于將網頁元素（一個矩形的平面）置于3D空間中，并對其實行某種變換。 ## 20.5.2.主要屬性 3D變換仍然還使用2D變換的2個屬性（transform和transform-origin），不過在transform的屬性值中，又增加了若干變換函數，以達到在3D空間中將盒子進行某種變換操作的目的。另外，對于3D變換，還會多出來幾個屬性，分別用于設定3D變換場景下所需要的一些特征信息。 3D變換的主要屬性有： * transform-style：用于設定元素變換的方式（2D還是3D），默認是flat（平面，也就是2D）；設置為preserve-3d，就可以實現3D變換。注意：該屬性應該設置在變換元素的父級元素上。 * perspective：透視距離，用于設定觀察3D視圖時眼睛離屏幕（也就是z=0）的距離，即觀察點的遠近。默認透視距離是“無窮大”，即最遠處。注意：該屬性應該設置在變換元素的上級元素上。 * perspective-origin：透視點，即觀察3D視圖時眼睛的位置，也就是眼睛直對屏幕的那個點在（x，y）坐標系上的坐標值。默認為（center，center），也就是父元素的中心點。注意：該屬性應該設置在變換元素的上級素上。 * transform-orgin 含義跟2D變換一樣，用于指定元素變換時的“原點”（基點）； * transform 含義跟2D變換一樣，只是多了一些有關3D變換的變換函數，主要有： translateX(x), translateY(y), translateZ(z), translate3d(x, y, z)：移動變換 rotateX(x角度), rotateY(y角度), rotateZ(z角度), rotate3d(x, y, z, deg)：旋轉變換；其旋轉規則為：左手“抓住”某軸，大拇指指向該軸正方向，則正值會沿其余手指的方向旋轉，否則相反； rotate3d中，x，y，z是數值，是相對大小，deg才是角度。 scaleX(x), scaleY(y), scaleZ(z), scale3d(x, y, z)：縮放變換 ## 20.5.3.案例制作一個“美女大圍墻”，大致如下所示：（注意：是若干張圖片所圍成的一個3D效果的貼圖墻效果） ![](https://img.kancloud.cn/48/1f/481f97dcbb5132c6a7ea19db17e95331_777x422.png) ``` <style> .box{ border:solid 1px red; width: 800px; height:500px; margin:10px auto ; padding-top:50px; } .box>.pic{ border:solid 2px blue; width:200px; height:300px; position:relative; margin:0 auto; perspective: 1000px; perspective-origin:center -100px; transform-style:preserve-3d; } .box>.pic>img{ width:200px; height:300px; position:absolute; left:0; } .box>.pic>img:nth-child(1){ transform:rotatey(0deg) translatez(300px); } .box>.pic>img:nth-child(2){ transform:rotatey(40deg) translatez(300px); } .box>.pic>img:nth-child(3){ transform:rotatey(80deg) translatez(300px); } .box>.pic>img:nth-child(4){ transform:rotatey(120deg) translatez(300px); } .box>.pic>img:nth-child(5){ transform:rotatey(160deg) translatez(300px); } .box>.pic>img:nth-child(6){ transform:rotatey(200deg) translatez(300px); } .box>.pic>img:nth-child(7){ transform:rotatey(240deg) translatez(300px); } .box>.pic>img:nth-child(8){ transform:rotatey(280deg) translatez(300px); } .box>.pic>img:nth-child(9){ transform:rotatey(320deg) translatez(300px); } </style> </head> <body> <div class="box"> <div class="pic"> <img src="images/girl1.jpg" alt=""> <img src="images/girl2.jpg" alt=""> <img src="images/girl3.jpg" alt=""> <img src="images/girl4.jpg" alt=""> <img src="images/girl5.jpg" alt=""> <img src="images/girl6.jpg" alt=""> <img src="images/girl7.jpg" alt=""> <img src="images/girl8.jpg" alt=""> <img src="images/girl9.jpg" alt=""> </div> </div> ``` 當天回顧：多欄布局： ``` column-width: column-count: column-gap:設置間隙 column-rule：間隔線 ``` 彈性布局： ``` display：flex flex-direction： row, row-reverse, column, column-reverse flex-wrap: nowrap, wrap, wrap-reverse justify-content: flex-start, flex-end, center, space-between, space-around align-content: flex-start, flex-end, center, space-between, space-around align-items: flex-start, flex-end, center,baseline, stretch ``` 2D變換： ``` transform: 位移變形：translatex(), translatey(), tranlatez(), translate3d(x,y,z) rotatex, rotatey, rotatez(), rotate3d() scalex(), scaley(), scalez(), scale3d() skewx(), skewy(), skew(x角度, y角度) transform-origin:設置變換原點 perspective:設置視點離屏幕的距離 perspective-origin:視點在屏幕上的坐標（相對于變換盒子的父盒子） transform-style: flat, preserve-3d ``` day6到此結束 ## 多欄布局： ``` 對盒子中的以文本為主的內容實行自動的多欄效果呈現。其核心屬性是：column-count, column-width 間隙寬度：column-gap 間隔線： column-rule ``` ## 彈性布局： ``` 就是實現一個盒子中的子盒子的橫向多列，以及縱向多行的布局效果。核心屬性：diaplay:flex flex-direction：設定方向 flex-wrap：設定換行 justify-content：解決一行內中的子盒子在主軸的排布問題 flex-start, flex-end, center, space-between, space-around align-content：解決縱向（輔軸）上多行的排布問題 flex-start, flex-end, center, space-between, space-around align-items：解決的是一行中的子盒子在輔軸上的排布問題。 ``` ## 2D變換： ``` transform: 位移變換：translatex(), translatey(), translate（x，y）； //長度值旋轉：rotate(角度) 縮放：scalex(), scaley(), scale(x, y) //比例值拉伸：skewx(), skewy(), skew(x角度， y角度)；角度值 transform-origin：設定變換的原點。 ``` ## 3D變換： ``` transform-style：preserve-3d； perspective：距離； //設定觀察舉例 perspective-origin：x，y坐標； //設定觀察點，是一個x，y平面的點。 transform多出幾個變換函數。 ```