1.2 縮放
語法
transform : scale(x,y);
-webkit-transform : scale(x,y);
根據(jù)倍數(shù)來縮放,取決于寬度(X軸)和高度(Y軸)的參數(shù);也可以用一個(gè)參數(shù),表示X軸和Y軸都按此倍數(shù)縮放
1.3 旋轉(zhuǎn)
語法
transform : rotate(deg);
-webkit-transform : rotate(deg)
單位:deg(度)
正值表示順時(shí)針,負(fù)值表示逆時(shí)針 (如果不懂順時(shí)針是哪個(gè)方向,請看看鐘表走的方向就是順時(shí)針)
1.4 傾斜
語法
transform : skew( x ,y)
-webkit-transform : skew(x,y)
單位:deg
例子:
transform:skew(15deg,0); -webkit-transform:skew(15deg,0);
1.5 矩陣轉(zhuǎn)換
matrix()
語法
transform : matrix(n,n,n,n,n,n)
-webkit-transform : matrix(n,n,n,n,n,n)
二、3D轉(zhuǎn)換
CSS3變形中具有X /Y可用的函數(shù):translateX()、translateY()、scaleX()、scaleY()、skewX()和skewY()
transform : translateX(x)
transform : translateY(y)
transform : scaleX(x)
transform : scaleY(y)
transform : skew(x)
transform : skew(y)
CSS3 3D變形包括函數(shù)有:rotateX()、rotateY()、rotate3d()、translateZ()、translate3d()、scaleZ()、scale3d()和matrix3d()。
transform : rotateX(deg) transform : rotateY(deg) transform : rotate3d(x,y,z,angle) transform : translateZ(z)
transform : translate3d(x,y,z)
transform : scaleZ(z)
transform : scale3d(x,y,z)
transform : matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)
因?yàn)楹芏嗳藭沐e3d旋轉(zhuǎn),所以在這里,我們重點(diǎn)介紹一下rotate3d(x,y,z,angle):
rotate3d(x,y,z,angle)共有四個(gè)參數(shù)
x、y、z分別對應(yīng)于X軸、Y軸、Z軸,默認(rèn)值都為0;而angle就是旋轉(zhuǎn)的角度
如果你要沿著該軸轉(zhuǎn)動那就將該軸的值設(shè)置為1,否則為0;然后在后面的angle中設(shè)置旋轉(zhuǎn)的角度,需要注意的是,angle只有一個(gè)角度值。
用法:
transform : rotate3d(1,0,0,50deg) //繞著X軸順時(shí)針旋轉(zhuǎn)50度
三、其他屬性
transform-origin 指定元素的中心點(diǎn)
transform-style 規(guī)定被嵌套元素如何在 3D 空間中顯示。當(dāng)設(shè)置值為preserve-3d值,建立一個(gè)3D渲染環(huán)境。perspective 屬性相對于觀眾產(chǎn)生一個(gè)3D場景,你看3D物體,眼睛到畫布的距離。正確的用法是他需要應(yīng)用到變形元素的祖先元素上。
perspective-origin 為視點(diǎn)的位置。
backface-visibilty 屬性用來設(shè)置背面的可見性。
3.1 transform-origin
指定元素的中心點(diǎn)
默認(rèn)情況,變形的原點(diǎn)在元素的中心點(diǎn),或者是元素X軸和Y軸的50%處。
還有一個(gè)新增的,transform-origin-z,控制元素三維空間中心點(diǎn)。
語法
transform-origin: x-axis y-axis z-axis;
值:
x-axis(left,center,right,length,%)
y-axis(top,center,bottom,length,%)
z-axis(length)
2D的變形中的transform-origin屬性可以是一個(gè)參數(shù)值,也可以是兩個(gè)參數(shù)值。如果是兩個(gè)參數(shù)值時(shí),第一值設(shè)置水平方向X軸的位置,第二個(gè)值是用來設(shè)置垂直方向Y軸的位置。
而在3D的變形中的transform-origin屬性還包括了Z軸的第三個(gè)值
例子:
transform-origin: 50% 50%; //默認(rèn)值
transform-origin : 50% 0; //也可以設(shè)為 center top
3.2 transform-style
規(guī)定被嵌套元素如何在 3D 空間中顯示。
有兩個(gè)值:
flat 子元素將不保留其 3D 位置。
preserve-3d 子元素將保留其 3D 位置。
當(dāng)設(shè)置值為preserve-3d值,建立一個(gè)3D渲染環(huán)境。
3.3 perspective
屬性相對于觀眾產(chǎn)生一個(gè)3D場景,你看3D物體,眼睛到畫布的距離。取值越小,3D效果就越明顯,也就是你的眼睛越靠近真3D。
正確的用法是他需要應(yīng)用到變形元素的祖先元素上。
屬性值:
number 元素距離視圖的距離,以像素計(jì),不能用百分比。
none 默認(rèn)值。與 0 相同。不設(shè)置透視。
定義時(shí)的perspective屬性,它是一個(gè)元素的子元素,透視圖,而不是元素本身。
注意:
所有主流瀏覽器都不支持perspective屬性。
Safari和Chrome使用私有屬性-webkit-perspective獲得支持。
為了更好的理解,下面我們來看一個(gè)例子:
div布局:
<div class="page">
<div class="cude">
<div class="dice">
<div class="side front">1</div>
<div class="side left">2</div>
<div class="side right">3</div>
<div class="side bottom">4</div>
<div class="side top">5</div>
<div class="side back">6</div>
</div>
</div>
</div>
CSS樣式:
.page { position: relative; max-width: 640px; width: 100%; height: 100%; margin: 0 auto; background: #373737; } .cude{ position:absolute; top:200px; left:100px; width: 100px; -webkit-perspective: 1000px; perspective: 1000px; } .dice { position: absolute; width: 100px; height: 100px; transform: rotateX(-15deg) rotateY(47deg); transform-style: preserve-3d; -webkit-transform-style: preserve-3d; } .dice .side { position: absolute; display: block; width: 100px; height: 100px; background: rgba(14,126,84,.5); text-align: center; line-height:100px; color:#fff; font-size:40px; font-weight: bold; border:1px solid #333; } .front{ transform:translateZ(50px); } .top{ transform: rotateX(90deg) translateZ(50px); } .bottom{ transform: rotateX(-90deg) translateZ(50px); } .left{ transform: rotateY(-90deg) translateZ(50px); } .right{ transform: rotateY(90deg) translateZ(50px); } .back{ transform: rotateY(-180deg) translateZ(50px); }
通過改變perspective的值,我們可以很明顯的看到效果:
屬性解析:
perspective取值為none或不設(shè)置,就沒有真3D空間。
perspective取值越小,3D效果就越明顯,也就是你的眼睛越靠近真3D。
perspective的值無窮大,或值為0時(shí)與取值為none效果一樣。
3.4 perspective-origin
perspective-origin 屬性定義 3D 元素所基于的 X 軸和 Y 軸。該屬性允許您改變 3D 元素的底部位置。
定義時(shí)的perspective -origin屬性,它是一個(gè)元素的子元素,透視圖,而不是元素本身。
3.5 backface-visibility
屬性值:
visible 背面是可見的。
hidden 背面是不可見的。
例子:
右邊的div加了backface-visibility:hidden;
<div class="box"></div>
<div class="box backface"></div>
樣式:
.box{
width:100px;
height:100px;
background:green;
float:left;
transform-style: preserve-3d;
transition:all 1s;
}
.box:hover{
transform:rotateY(180deg);
}
.backface{
backface-visibility:hidden;
}
四、兼容性
Internet Explorer使用私有屬性-ms-Transform-origin支持(僅2D轉(zhuǎn)換)。
Firefox使用私有屬性-MOZ-Transform-origin支持(僅2D轉(zhuǎn)換)。
Opera使用私有屬性-O-Transform-origin支持(僅2D轉(zhuǎn)換)。
Safari和Chrome使用私有屬性-WebKit-Transform-origin支持(3D和2D變換)。
更多建議: