2D變形
transform-origin為變形的基準(zhǔn)點(diǎn)铆隘，對(duì)以下變形均有效片迅。默認(rèn)是中心浪谴，可以取值:
top, bottom, left, right, center
百分?jǐn)?shù)如
transform-origin: 0% 0%;旋轉(zhuǎn)rotate
transform:rotate(30deg);位移translate
相對(duì)于自身
transform:translate(200px,150px);
// 只設(shè)置一個(gè)方向
transform:translateY(100px);
// 也可以設(shè)置成自身寬度的百分比
transform:translate(-50%,-50%);
- 縮放scale
//單獨(dú)設(shè)置寬高
transform:scale(2, 0.5);
//只設(shè)置一個(gè)方向
transform:scaleY(0.3);
//寬高等比縮放
transform:scale(3);
- 扭曲skew
transform:skew(10deg, 20deg);
transform:skewY(10deg);
transform:skew(10deg);
transform:skew(30deg,10deg)如下圖:
扭曲.png
- 矩陣matrix
matrix(<number>, <number>, <number>, <number>, <number>, <number>)
3D變形
- 可以利用perspective來激活3D效果（相當(dāng)于視距值骇，離得近3D效果就好道盏，遠(yuǎn)就不明顯）
- 在transform屬性中使用perspective方法
transform: perspective( 600px );
- 直接使用perspective屬性
perspective: 600px;
二者區(qū)別主要在作用于多個(gè)元素的時(shí)候展示效果會(huì)有不同
對(duì)比.png
- 參數(shù)
rotateX( )
rotateY( )
rotateZ( )
translateZ( )
scaleZ( )
// 縮寫方法而柑，需要把三個(gè)參數(shù)寫全（可能會(huì)觸發(fā)硬件加速，提高渲染性能荷逞，即使像translate3d(0,0,0)這樣什么也沒發(fā)放改變）
translate3d( tx, ty, tz )
scale3d( sx, sy, sz )
rotate3d( rx, ry, rz, angle )
rotateXYZ.png
translateZ.png
