從零開始的全棧工程師——CSS3( 2d,3d )
transform屬性
CSS3的變形（transform）屬性讓元素在一個坐標系統中變形。transform屬性的基本語法如下：
transform：none | <transform-function> [<transform-function>]*
2Dtransform常用的transform-function的功能:
translate()：用來移動元素，可以根據X軸和Ｙ軸坐標重新定位元素位置。在此基礎上有兩個擴展函數：translateX()和translateY()。
scale()：用來縮小或放大元素，可以使用元素尺寸發生變化。在此基礎上有兩個擴展函數：scaleX()和scaleY()。
rotate()：用來旋轉元素。
skew()：用來讓元素傾斜。在此基礎上有兩個擴展函數：skewX()和skewY()。
matrix()：定義矩陣變形，基於X軸和Y軸坐標重新定位元素位置。
3D transform常用的transform-function的功能:
translate3d()：移動元素，用來指定一個3D變形移動位移量。
translatez()：指定3Ｄ位移在Ｚ軸的位移量。
scale3d()：用來縮放一個元素。
scaleZ():指定Z軸的縮放向量。
rotate3d()：指定元素具有一個三維旋轉的角度。
rotateX()、rotateY()和rotateZ()：讓元素具有一個旋轉角度。
perspective()：指定一個透視投影矩陣。
matrix3d()：定義矩陣變形。
一些重要屬性：
transform-origin屬性指定元素的中心點在哪。後面增加了第三個數transform-origin-z，控制元素三維空間中心點。
perspective屬性相對於觀眾產生一個3D場景，看3D物體，眼睛到畫布的距離。 它需要應用到變形元素的祖先元素上。
perspective-origin為視點的位置。
backface-visibilty屬性用來設置背面的可見性。
設置transform-style的值為preserve-3d時，建立一個3D渲染環境。
參考博客：https://blog.csdn.net/xu_ya_fei/article/details/51684543
案例：利用transform來寫一個正方體
CSS：
body { -webkit-perspective: 500; }
.box { width: 100px; height: 100px; position: relative; margin: 100px auto 0; transform-style: preserve-3d; animation: flash 3s linear infinite; }
.box:hover > div:nth-of-type(1){ transform: translateZ(-200px); } .box:hover > div:nth-of-type(2){ transform: rotateX(90deg) translateZ(200px); } .box:hover > div:nth-of-type(3){ transform: rotateX(90deg) translateZ(-200px); } .box:hover > div:nth-of-type(4){ transform: rotateY(90deg) translateZ(200px); } .box:hover > div:nth-of-type(5){ transform: rotateY(90deg) translateZ(-200px); } .box:hover > div:nth-of-type(6){ transform: translateZ(200px); }
@keyframes flash { 0%{ transform: rotateX(0) rotateX(0); } 100%{ transform: rotate(360deg) rotateX(360deg); } }
.box>div { width: 100px; height: 100px; position: absolute; transition: all 1s; } .box>div:nth-of-type(1){ background: lightblue; } .box>div:nth-of-type(2){ background: lime; } .box>div:nth-of-type(3){ background: lightseagreen; } .box>div:nth-of-type(4){ background: orange; } .box>div:nth-of-type(5){ background: darkorchid; } .box>div:nth-of-type(6){ background: pink; }
.box>div:nth-of-type(1){ transform: translateZ(-50px); } .box>div:nth-of-type(2){ transform: rotateX(90deg) translateZ(50px); } .box>div:nth-of-type(3){ transform: rotateX(90deg) translateZ(-50px); } .box>div:nth-of-type(4){ transform: rotateY(90deg) translateZ(50px);} .box>div:nth-of-type(5){ transform: rotateY(90deg) translateZ(-50px);} .box>div:nth-of-type(6){ transform: translateZ(50px); } HTML： <div class="box"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> </div> 效果：
從零開始的全棧工程師——CSS3( 2d,3d )