CSS3 Transform 2D和3D轉(zhuǎn)換

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è)方向，請(qǐng)看看鐘表走的方向就是順時(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)楹芏嗳藭?huì)搞錯(cuò)3d旋轉(zhuǎn)，所以在這里，我們重點(diǎn)介紹一下rotate3d(x,y,z,angle)：

rotate3d(x,y,z,angle)共有四個(gè)參數(shù)

x、y、z分別對(duì)應(yīng)于X軸、Y軸、Z軸，默認(rèn)值都為0；而angle就是旋轉(zhuǎn)的角度

如果你要沿著該軸轉(zhuǎn)動(dòng)那就將該軸的值設(shè)置為1，否則為0；然后在后面的angle中設(shè)置旋轉(zhuǎn)的角度，需要注意的是，angle只有一個(gè)角度值。

用法：

transform : rotate3d(1,0,0,50deg)  //繞著X軸順時(shí)針旋轉(zhuǎn)50度

三、其他屬性

transform-origin  指定元素的中心點(diǎn)

perspective 屬性相對(duì)于觀眾產(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è)置垂直方向Ｙ軸的位置。

而在3D的變形中的transform-origin屬性還包括了Ｚ軸的第三個(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

屬性相對(duì)于觀眾產(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變換）。