| title | layout | categories | tags | excerpt |
|---|---|---|---|---|
CSS3之2D與3D變換 |
post |
CSS |
css2d css3d transform |
介紹css中元素的2D與3D變換方法 |
目錄
css3實現了對元素執行2D平面變換，以及視覺上的3D空間變換，2D變換平時可能用的較多，3D效果也能錦上添花；
關於座標軸
初中數學的幾何學裏我們便開始接觸座標軸，最基本的是平面直角座標系XoY，然後延伸出空間直角座標系XYZ，現在我們來說一下css中的座標系；
css甚至一下設備相關的開發中，基本都遵循這樣一套座標系：以手機屏幕爲例，座標系圓點位於屏幕最左上角；x軸水平，向右爲正方向；y軸垂直，向下爲正方向；z軸垂直於整個屏幕平面，向外爲正方向，就是屏幕光線射向你眼睛的方向；
如圖：
2D變換
包括平移translate()，旋轉rotate()，縮放scale()，傾斜skew()，矩陣matrix()；
translate(x,y)
平移操作，包括translateX(x), translateY(y)，括號內填平移參數值，可以是負值，即反方向；
例如：
div {
/*元素向右平移50px，向下移60px*/
transform: translateX(50px);
transform: translateY(60px);
}
/*簡寫形式，效果相同*/
div {
transform: translate(50px, 60px);
}注意translate()只指定一個值則默認是x軸位移，即水平移動；
rotate(deg)
元素旋轉，括號中參數爲旋轉角度，順時針爲正值，逆時針爲負值，單位爲deg，即多少度；
例如：
div {
/* 順時針旋轉30° */
transform: rotate(30deg);
}
scale(x,y)
縮放元素，參數分別爲x軸，y軸縮放倍數，包括scaleX(x)和scaleY(y)，提供一個參數表示按比例縮放；
例如：
div {
/* 橫向縮小一半，縱向放大一倍 */
transform: scale(.5, 2);
}
div {
/* 按比例放大3倍 */
transform: scale(3);
}
skew(xdeg,ydeg)
包含skewX(deg), skewY(deg)，表示在水平和垂直方向傾斜的角度；
例如：
div {
transform: skewX(30deg);
transform: skewY(45deg);
}
/* 簡寫 */
div {
transform: skew(30deg, 45deg);
}需要注意，如果元素爲一個矩形，那麼skewX(30deg)表示矩形頂邊固定，底邊向右傾斜30deg；skewY(30deg)表示矩形左邊框固定，右邊框向下傾斜30deg；
可以根據上面講的屏幕座標系來記憶，x軸位於屏幕頂部，方向向右；y軸位於屏幕左部，方向向下；
如果skew()只指定一個值，默認是水平傾斜；
skewX(30deg) 的效果：
skewY(30deg) 的效果：
matrix(a,b,c,d,e)
這是一個綜合屬性，之前的平移，縮放，旋轉，傾斜都能通過這個矩陣函數實現，對，大學裏線性代數中的矩陣 T_T；
其實這個函數就是前面四種操作的原理，函數共有六個參數，四種操作都對應不同的參數改變方式，像我們這種非數學專業的就不贅述原理了，前面的操作基本夠用了(想尋找刺激就去百度“css matrix”吧)~~;
3D變換
所謂3D就是在前面2D平面上多了一個z軸，方法名也差不多，然後能以分別以三根軸位基準進行變換，實現立體效果；
看一下所有3D操作方法：
translate3d(x,y,z)
結合前面講的空間座標系和 x, y, z軸的位置，三個參數分別對應元素在三個座標軸方向的平移值，也包含三個方法translateX(x), translateY(y), translateZ(z)；
舉例：
div {
transform: translateX(50px);
transform: translateY(60px);
transform: translateZ(70px);
}
/* 簡寫 */
div {
transform: translate3d(50px, 60px, 70px);
}注意： 關於設置 translateZ(z) 看不出效果的問題，後面說到設置persoective時會解釋；
rotate3d(x,y,z,deg)
參數x, y, z爲空間座標系的一個座標位置，然後由原點(0, 0, 0)指向這個點形成一個有方向的新軸，數學中稱矢量，最後一個參數就是元素圍繞剛纔所形成的新軸旋轉的度數；
也包括 rotateX(deg), rotateY(deg), rotateZ(deg)，之前2D的 rotate() 便是這裏的 rotateZ()；
至於旋轉的方向，判斷方法類似於物理中的左手定則：角度指定爲正的話，左手拇指與四指垂直，拇指指向元素圍繞旋轉的座標軸或自定義軸，四指彎曲圍繞方向就是旋轉方向；
舉例：
div {
transform: rotateX(30deg);
transform: rotateY(30deg);
transform: rotataZ(30deg);
}
/* 自定義軸旋轉 */
div {
transform: rotate3d(10, 10, 10, 30deg);
}rotateX(30deg) 的效果：
rotateY(30deg) 的效果：
關於爲什麼這裏的旋轉不是想象中的效果，而是縮小，主要是沒有設置視點，後面會講；
scale3d(x,y,z)
元素關於三個軸的縮放比例，包括scaleX(x), scaleY(y), scaleZ(z)，舉例：
div {
transform: scaleX(2);
transform: scaleY(2);
transform: scaleZ(2);
}
/* 簡寫 */
div {
transform: scale3d(2, 2, 2);
}需要注意這裏的scaleZ()，正常情況下，擴大z軸會是物體變厚，但是css裏面呈現的平面元素並沒有厚度，所以這裏的縮放z軸其實是縮放元素在z軸的座標，所以要有效果必須要指定translateZ()的值；
舉例：
body {
perspective: 500;
}
div {
/* 必須這個順序，先縮放後平移，不然無效果 */
transform: scaleZ(2) translateZ(100px);
}
按照上面樣式才能看到scaleZ(2)的效果，因爲後面在z軸上移動了100px，縮放比例爲2，最終會移動200px，屏幕上則表現爲元素放大了一下，這是透視效果，就是那個 perspective 值，下面會講到；
matrix3d()
和前面2D的matrix()相似，只不過這裏括號裏的參數有16個，矩陣更加複雜，跳過吧﹋o﹋，有興趣可以自行百度~~；
perspective
在上面的示例中，有關z軸的平移和縮放通常情況下是看不出效果的，正是缺少這項屬性值，叫做 透視，美術或設計中會出現這個詞彙，就是實現物體近大遠小的效果，遠小最終會小到一個點，那就是 透視點，perspective就是用來設置那個點距離元素有多遠，一般300~600很體現很好的透視效果，值越小元素透視變形越嚴重；
需要注意的是，這項屬性設置在應用透視效果元素的父元素的樣式中，才能看出效果，例如：
body {
perspective: 500;
/* 考慮瀏覽器兼容 */
-webkit-perspective: 500;
}也可以設置在元素本身，格式爲：
div {
transform: perspective(500);
-webkit-transform: perspective(500);
}rotateX(45deg) 的更真實的效果：
rotateY(45deg) 的效果：
perspective-origin
此項設置透視點的位置，默認在元素幾何中心，需要設置的話，格式如下：
body {
/* 默認中心 */
perspective-origin: center center;
/* 左上角 */
perspective-origin: left top;
/* 右邊中心 */
perspective-origin: right center;
/* 底部中心 */
perspective-origin: bottom center;
/* 也可以是長度 */
perspective-origin: 30px 40px;
/*最後記得加 -webkit- 兼容 */
}perspective-origin: left center 的效果：
perspective-origin: right center 的效果：
backface-visibility
翻譯過來叫背面是否可見，可以設置visible和hidden，默認可見，比如元素正面有文字，設置背面可見，則關於y軸旋轉180°後元素內文字變成鏡像，否則不會出現；
backface-visibility: visible 的效果：
backface-visibility: hidden 的效果(有旋轉，只是背面不可見，則看不見了)：
其他屬性
transform-origin
設置2D/3D變化的基準，可以是長度值，也可以是 left, right, top, bottom，例如：
div {
/* 關於元素左上角旋轉 */
transform-origin: left top;
transform: rotate(30deg);
}
transform-style
設置元素如何在3D空間呈現被嵌套的元素，選擇是 flat 和 preserve-3d，默認flat；
這裏這麼來理解，之前我們對一個元素執行變換時，都是以屏幕所在平面的座標系在變換，但是元素如果存在子元素的話，transform-style就是用來確定在哪套座標系上進行變換，flat表示任然以屏幕座標系爲基準，preserve-3d表示以變換後的父元素所在平面的座標系爲基準；
#parent {
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transform: perspective(500) rotateY(45deg);
-webkit-transform: perspective(500) rotateY(45deg);
}
#child {
transform: perspective(500) rotateX(45deg);
-webkit-transform: perspective(500) rotateX(45deg);
}flat 的效果：
preserve-3d 的效果：
例如，父元素繞x軸旋轉了45度，並且設置transform-style: preserve-3d，而嵌套的子元素只繞y軸旋轉45度，那麼最終效果就是子元素繞父元素平面的y軸旋轉了45度，看起來就像先x軸轉45度後y軸轉45度的效果；
最後，別忘了爲以上所有特性添加瀏覽器兼容前綴；
順便附上一個以上功能綜合效果的演示頁面，請戳下面：