transform: none | <transform-function>+
transform: none
<!-- 默認(rèn)值為 none -->
transform: <transform-function>+

transform: translate(50%) rotate(45deg);
transform: rotate(45deg) transform(50%)
<!-- 變形函數(shù)順序普通結(jié)果不同，原因是坐標(biāo)位置發(fā)生了改變 -->

http://wiki.jikexueyuan.com/project/fend_note/images/T/transform-transform-function.png" alt="" />

rotate()

rotate(<angle>)

rotate(45deg);
<!-- 右邊旋轉(zhuǎn)，順時(shí)針 -->
rotate(-60deg);
<!-- 左邊旋轉(zhuǎn)，逆時(shí)針 -->

http://wiki.jikexueyuan.com/project/fend_note/images/T/transform-rotate.png" alt="" />

transform-origin

其用于設(shè)置原點(diǎn)的位置（默認(rèn)位置為元素中心）第一值為 X 方向，第二值為 Y 方向，第三值為 Z 方向。（當(dāng)值空出未寫(xiě)的情況下默認(rèn)為 50%）

transform-origin: [ <percentage> | <length> | left | center | right | top | bottom] | [ [ <percentage> | <length> | left | center | right ] && [ <percentage> | <length> | top | center | bottom ] ] <length>?

<!-- 默認(rèn)值為 50% 50% -->

transform-origin: 50% 50%;
transform-origin: 0 0;
transform-origin: right 50px 20px;
transform-origin: top right 20px;

http://wiki.jikexueyuan.com/project/fend_note/images/T/transform-origin.png" alt="" />

translate()

移動(dòng)方法，參數(shù)分別代表 X 與 Y 軸的移動(dòng)（偏移值均可為負(fù)值）。

translate(<translation-value>[, <translation-value>]?)

<!-- 也可單獨(dú)設(shè)置 X 與 Y 軸的偏移 -->
translationX(<translation-value>)
translationY(<translation-value>)

transform: translate(50px);
transform: translate(50px, 20%);
<!-- Y 軸偏移為偏移對(duì)象的高度，X 軸為寬度 -->
transform: translate(-50px);
transform: translate(20%);

http://wiki.jikexueyuan.com/project/fend_note/images/T/transform-traslate.png" alt="" />

scale()

縮放方法，參數(shù)分別代表 X 與 Y 軸的縮放（縮放值均可為小數(shù)）。當(dāng)?shù)诙岛雎詴r(shí)，默認(rèn)設(shè)置為等同第一值。

scale(<number> [, <number>]?)

scaleX(<number>)
scaleY(<number>)

<!-- 整體放大 1.2 倍 -->
transform: scale(1.2);
<!-- 高度拉伸 -->
transform: scale(1, 1.2);
<!-- 寬度拉伸 -->
transform: scaleX(1.2);
<!-- 高度拉伸 -->
transform: scaleY(1.2);

http://wiki.jikexueyuan.com/project/fend_note/images/T/transform-scale.png" alt="" />

skew()

其為傾斜的方法。第一值為 Y 軸往 X 方向傾斜（逆時(shí)針），第二值為 X 軸往 Y 方向傾斜（順時(shí)針）。（傾斜值可為負(fù)值）

skew(<angle>[, <angle>]?)

skewX(<angle>)
skewY(<angle>)

transform: skew(30deg);
transform: skew(30deg, 30deg);
transform: skewX(30deg);
transform: skewY(30deg);

http://wiki.jikexueyuan.com/project/fend_note/images/T/transform-skew.png" alt="" />

3D 變形

3D 變形示例代碼

rotateY()

3D 空間旋轉(zhuǎn)。

transform: rotateY(<angle>)

perspective

http://wiki.jikexueyuan.com/project/fend_note/images/P/perspective-3d.PNG" alt="" />

其用于設(shè)置圖片 Y 軸旋轉(zhuǎn)后的透視效果。<length> 可以理解為人眼與元素之間的距離，越緊則效果越明顯。

perspective: none | <length>

perspective: none;
perspective: 2000px;
perspective: 500px;

http://wiki.jikexueyuan.com/project/fend_note/images/T/transform-perspective.png" alt="" />

perspective-origin

其為設(shè)定透視的角度（透視位置均可設(shè)定為負(fù)值）。

perspective-origin: [ <percentage> | <length> | left | center | right | top | bottom] | [ [ <percentage> | <length> | left | center | right ] && [ <percentage> | <length> | top | center | bottom ] ]

perspective-origin: 50% 50%
<!-- 默認(rèn)值為 50% 50% 正中間的位置進(jìn)行透視-->
perspective-origin: left bottom;
perspective-origin: 50% -800px;
perspective-origin: right;

http://wiki.jikexueyuan.com/project/fend_note/images/T/transform-perspective-origin.png" alt="" />

translate3d()

translate3d(<translate-value>, <translate-value>, <length>)

translateX(<translate-value>)
translateY(<translate-value>)
translateZ(<length>)

transform: translate3d(10px, 20%, 50px);
<!-- %的參照物為自身元素 -->
transform: translateX(10px);
transform: translateY(20%);
transform: translateZ(-100px);

http://wiki.jikexueyuan.com/project/fend_note/images/T/transform-translate3d.png" alt="" />

scale3d()

scale3d(<number>, <number>, <number>)

scaleX(<number>)
scaleY(<number>)
scaleZ(<number>)

transform: scale3d(1.2, 1.2, 1);
transform: scale3d(1, 1.2, 1);
transform: scale3d(1.2, 1, 1);
transform: scaleZ(5);
<!-- Z 軸的縮放擴(kuò)大并不影響盒子大小 -->

http://wiki.jikexueyuan.com/project/fend_note/images/T/transform-scale3d.png" alt="" />

rotate3d()

取 X Y Z 三軸上的一點(diǎn)并于坐標(biāo)原點(diǎn)連線，以連線為軸進(jìn)行旋轉(zhuǎn)（逆時(shí)針）。

rotate3d(<number>, <number>, <number>, <angle>)

rotateX(<angle>)
rotateY(<angle>)
rotateZ(<angle>)

transform: rotate3d(1, 0, 0, 45deg);
<!-- 上面等同于 X 軸旋轉(zhuǎn) -->
transform: rotate3d(0, 1, 0, 45deg);
<!-- 上面等同于 Y 軸旋轉(zhuǎn) -->
transform: rotate3d(0, 0, 1, 45deg);
<!-- 上面等同于 2D 旋轉(zhuǎn) -->
transform: rotate3d(1, 1, 1, 45deg);

http://wiki.jikexueyuan.com/project/fend_note/images/T/transform-rotate3d.png" alt="" />

transform-style

其用于設(shè)置保留內(nèi)部的 3D 空間，原因是一個(gè)元素進(jìn)行transform之后內(nèi)部默認(rèn)為flat。

transform-style: flat | perserve-3d

<!-- 默認(rèn)為 flat -->

transform-style: flat;
transform-style: preserve-3d;

http://wiki.jikexueyuan.com/project/fend_note/images/T/transform-transform-style.png" alt="" />

backface-visibility

其用于設(shè)置背面不可見(jiàn)。

backface-visibility: visible | hidden

backface-visibility: visible;
backface-visibility: hidden;

http://wiki.jikexueyuan.com/project/fend_note/images/T/transform-backface-visibility.png" alt="" />

上一篇：協(xié)作流程下一篇：開(kāi)發(fā)實(shí)踐