CSS3 3D 轉(zhuǎn)換
學(xué)習(xí)本節(jié)前先看一下3D坐標(biāo)軸
用X、Y、Z分別表示空間的3個(gè)維度，三條軸互相垂直。
3D Transforms
CSS3 允許您使用 3D 轉(zhuǎn)換來(lái)對(duì)元素進(jìn)行格式化。
在本章中，您將學(xué)到其中的一些 3D 轉(zhuǎn)換方法：
rotateX()
rotateY()
瀏覽器支持
rotateX() 方法
rotateX()方法，圍繞其在一個(gè)給定度數(shù)X軸旋轉(zhuǎn)的元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style type="text/css">
#test{
height:200px;
width:200px;
position:absolute;
margin-top:100px;
margin-left:100px;
}
#test div{
height:200px;
width:200px;
background:lightblue;
-webkit-transition: all .6s;
}
#test div:hover{
-webkit-transform:rotateX(90deg);
}
</style>
<body>
<div id="test">
<div></div>
</div>
</body>
</html>rotateY() 方法
rotateY()方法，圍繞其在一個(gè)給定度數(shù)Y軸旋轉(zhuǎn)的元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style type="text/css">
#test{
width:400px;
height:400px;
position:absolute;
margin-left:100px;
margin-top: 100px;
/* 光源設(shè)置為離頁(yè)面200像素的位置 */
perspective:200px;
}
#test1{
width:400px;
height:400px;
position:relative;
/* 相當(dāng)于指定一個(gè)3D的空間 */
transform-style:preserve-3d;
}
#div2{
width:400px;
height:400px;
position:relative;
background:lightcoral;
/* 指定變換效果，變換時(shí)間為1S */
-webkit-transition: all 1s;
}
#test #test1:hover #div2{
/* 繞Y軸旋轉(zhuǎn)180度 */
-webkit-transform: rotateY(180deg);
}
</style>
<body>
<div id="test">
<div id="test1">
<div id="div2"></div>
</div>
</div>
</body>
</html>轉(zhuǎn)換屬性
下表列出了所有的轉(zhuǎn)換屬性：
屬性 ? ? ? ??描述 ? ? ? ? ? ? ? ? ?CSS
transform ? ?向元素應(yīng)用 2D 或 3D 轉(zhuǎn)換。 ? ?3 ? ?
transform-origin ? ?允許你改變被轉(zhuǎn)換元素的位置。 ? ?3 ? ?
transform-style ? ?規(guī)定被嵌套元素如何在 3D 空間中顯示。 ? ?3 ? ?
perspective ? ?規(guī)定 3D 元素的透視效果。 ? ?3 ? ?
perspective-origin ? ?規(guī)定 3D 元素的底部位置。 ? ?3 ? ?
backface-visibility ? ?定義元素在不面對(duì)屏幕時(shí)是否可見(jiàn)。 ? ?3 ? ?
3D 轉(zhuǎn)換方法
函數(shù) ? ? ? ??描述
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) ? ?定義 3D 轉(zhuǎn)換，使用 16 個(gè)值的 4x4 矩陣。 ? ?
translate3d(x,y,z) ? ?定義 3D 轉(zhuǎn)化。 ? ?
translateX(x) ? ?定義 3D 轉(zhuǎn)化，僅使用用于 X 軸的值。 ? ?
translateY(y) ? ?定義 3D 轉(zhuǎn)化，僅使用用于 Y 軸的值。 ? ?
translateZ(z) ? ?定義 3D 轉(zhuǎn)化，僅使用用于 Z 軸的值。 ? ?
scale3d(x,y,z) ? ?定義 3D 縮放轉(zhuǎn)換。 ? ?
scaleX(x) ? ?定義 3D 縮放轉(zhuǎn)換，通過(guò)給定一個(gè) X 軸的值。 ? ?
scaleY(y) ? ?定義 3D 縮放轉(zhuǎn)換，通過(guò)給定一個(gè) Y 軸的值。 ? ?
scaleZ(z) ? ?定義 3D 縮放轉(zhuǎn)換，通過(guò)給定一個(gè) Z 軸的值。 ? ?
rotate3d(x,y,z,angle) ? ?定義 3D 旋轉(zhuǎn)。 ? ?
rotateX(angle) ? ?定義沿 X 軸的 3D 旋轉(zhuǎn)。 ? ?
rotateY(angle) ? ?定義沿 Y 軸的 3D 旋轉(zhuǎn)。 ? ?
rotateZ(angle) ? ?定義沿 Z 軸的 3D 旋轉(zhuǎn)。 ? ?
perspective(n) ? ?定義 3D 轉(zhuǎn)換元素的透視視圖。 ? ?
