變形(transform)屬性-2D
讓元素在一個(gè)坐標(biāo)系統(tǒng)中變形醉者。這個(gè)屬性可以移動(dòng)皂岔、旋轉(zhuǎn)和縮放元素晶府。
transform:none | <transform-function>[<transform-function>]*;
默認(rèn)是:
transform:none;
rotate()旋轉(zhuǎn)
指定角度參數(shù)對(duì)原元素指定2D旋轉(zhuǎn)
transform:rotate(<angle>);
例:transform: rotate(-45deg);逆時(shí)針旋轉(zhuǎn)45度
angle為正數(shù)代表順時(shí)針旋轉(zhuǎn)椒袍,負(fù)數(shù)是逆時(shí)針坛吁。
translate()平移
從當(dāng)前位置向x軸或y軸移動(dòng)摩幔。
translateX(x)
水平移動(dòng)彤委,從左到右為正
translateY(y)
垂直移動(dòng),從上到下為正
translate(x或衡,y)
水平垂直移動(dòng)
scale()縮放
scaleX(x)
水平縮放焦影,中心點(diǎn),取值為百分比
scaleY(y)
豎直縮放
scale(x,y)
縮放封断,如果就填一個(gè)數(shù)斯辰,那么是等比例放大縮小
skew()扭曲或斜切
skewX
(正值:逆時(shí)針)x軸斜切
skewY
(正值:順時(shí)針)y軸斜切
skew(x,y)
如果y沒(méi)填只有x,就默認(rèn)y為0
3D變換
rotate3D()
transform:rotateX(<angle>);//X軸旋轉(zhuǎn)的角度
transform:rotateY(<angle>);//Y軸旋轉(zhuǎn)的角度
transform:rotateZ(<angle>);//Z軸旋轉(zhuǎn)的角度
transform:rotate(x,y,z,<angle>);//Z軸旋轉(zhuǎn)的角度
理解:正面看體操運(yùn)動(dòng)員玩單杠
translate3D()
translateZ(z)//z軸平移
transform:translate3d(x,y,z)//從當(dāng)前位置向z軸移動(dòng)坡疼。
scale3D()
transform:scaleZ(z)//z軸縮放
transform:scale3d(x,y,z)//從當(dāng)前3d縮放彬呻。
坐標(biāo)原心
transform-origin:25% top;
矩陣
transform:matrix(a,b,c,d,tx,ty);
指定嵌套元素是怎樣的三維空間
transform-style:flat|preserve-3d;
perspective屬性
指定觀察者與「z=0」平面的距離,使具有三維位置變換的元素產(chǎn)生透視效果。
perspective屬性指定了觀察者與z=0平面的距離闸氮,使具有三維位置變換的元素產(chǎn)生透視效果剪况。z>0的三維元素比正常大,而z<0時(shí)則比正常小蒲跨,大小程度由該屬性的值決定译断。
三維元素在觀察者后面的部分不會(huì)繪制出來(lái),即z軸坐標(biāo)值大于perspective屬性值的部分或悲。
屬性值為0或負(fù)值或none(none是默認(rèn)值)時(shí)孙咪,沒(méi)有透視效果
perspective:number|none;
perspective-origin屬性
指定透視點(diǎn)的位置。
perspective-origin:x-axisy-axis;
perspective-origin:50%50%;//默認(rèn)值
backface-visibility
指定元素背面面向用戶時(shí)是否可見(jiàn)
backface-visibility:visible|hidden;