CSS自學筆記（13）:CSS3 2D/3D轉換

CSS3中新增了對元素進行2D和3D的轉換效果，這樣能夠是開發人員很方便的作出視覺效果更好的網頁來。

經過CSS3中屬性的定義，咱們能夠對元素進行移動、縮放、拉伸、旋轉等等，能夠經過定義transform屬性來實現轉換效果。

瀏覽器支持

屬性	瀏覽器支持
2D transform	IE	Firefox	Chrome(-webkit-)	Safari(-webkit-)	Opera
3D transform	IE	Firefox	Chrome(-webkit-)	Safari(-webkit-)	Opera

目前的主瀏覽器都已經支持2D效果的transform屬性，3D效果的transform只有Opera不支持。同時要注意到時，在定義transform屬性時，在Chrome和Safari瀏覽器中須要加(-webkit-)前綴。

transform屬性的部分方法

函數	描述
matrix(n,n,n,n,n,n)	定義 2D 轉換，使用六個值的矩陣。
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	定義 3D 轉換，使用 16 個值的 4x4 矩陣。
translate3d(x,y,z)	定義 3D 轉化。
translate(x,y)	定義 2D 轉換。
translateX(x)	定義 2D/3D 轉換，沿着 X 軸移動元素。
translateY(y)	定義 2D/3D 轉換，沿着 Y 軸移動元素。
translateZ(z)	定義 3D 轉換，沿着 Z 軸移動元素。
scale3d(x,y,z)	定義 3D 縮放轉換。
scale(x,y)	定義 2D 縮放轉換。
scaleX(x)	定義 2D/3D 縮放轉換，經過給定一個 X 軸的值(寬度)。
scaleY(y)	定義 2D/3D 縮放轉換，經過給定一個 Y 軸的值(高度)。
scaleZ(z)	定義 3D 縮放轉換，經過給定一個Z軸的值。
rotate(angle)	定義 2D 旋轉。
rotate3d(x,y,z,angle)	定義 3D 旋轉。
rotateX(angle)	定義 3D 旋轉，經過給定的值沿着 X 軸旋轉。
rotateY(angle)	定義 3D 旋轉，經過給定的值沿着 Y 軸旋轉。
rotateZ(angle)	定義 3D 旋轉，經過給定的值沿着 Z 軸旋轉。
skew(x-angle,y-angle)	定義 2D 傾斜轉換，沿着 X 和 Y 軸。
skewX(angle)	定義 2D 傾斜轉換，經過給定的值沿着 X 軸傾斜。
skewY(angle)	定義 2D 傾斜轉換，經過給定的值沿着 Y 軸傾斜。
perspective(n)	定義 3D 轉換元素的透視視圖。

注：angle爲度數值

在CSS3中transform主要包括如下幾種：旋轉rotate、扭曲skew、縮放scale和移動translate以及矩陣變形matrix。

transform屬性的語法結構：

	transform:none | <transform-function> [ <transform-function> ]*
也就是：
	transform:rotate|scale|skew| translate|matrix;

經過rotate(angle)，能夠對元素進行旋轉操做，若是給定值爲負值，元素會逆時針旋轉。

*{
	transform: rotatey(130deg); transform: rotate(20deg);
}

無轉換

(3D轉換)transform:rotateY(130deg)

(2D轉換)transform: rotate(20deg);

經過scale()方法，能夠經過給定倍數對元素的尺寸進行放大或者縮小。

*{
	transform: scale(4,2);
}

 

無轉換元素

transform: scale(4,2);

經過skew()方法，能夠經過給定的角度值，對元素的X軸和Y軸進行翻轉。

*{
	transform: skew(20deg,20deg);
}

 

無轉換元素

transform: skew(20deg, 20deg);

咱們經過一個就簡單的導航欄看看transform屬性各個方法的效果：

關鍵部分的CSS代碼：

.menu ul {
    list-style-type: none;
    border-top: 10px solid gray;
}
.menu ul li a {
    color: #fff;
    float: left;
    margin: 0 5px;
    font-size: 15px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    width: 80px;
    padding: 10px 5px;
    border-radius: 0 0 5px 5px;
    box-shadow: 0 0 1px #000, inset 0 0 2px #000;
    text-shadow: 0 2px 2px #000;
    text-decoration: none;
}
.menu ul li a {
    background: #2EC7D2;
}

.menu ul li.translate a:hover {
    transform: translate(-10px, -10px);
}
.menu ul li.translate-x a:hover {
    transform: translateX(-10px);
}
.menu ul li.translate-y a:hover {
    transform: translateY(-10px);
}
.menu ul li.rotate a:hover {
    transform: rotate(30deg);
}
.menu ul li.scale a:hover {
    transform: scale(0.8, 0.8);
}
.menu ul li.scale-x a:hover {
    transform: scaleX(0.8);
}
.menu ul li.scale-y a:hover {
    transform: scaleY(1.2);
}
.menu ul li.skew a:hover {
    transform: skew(30deg, 30deg);
}
.menu ul li.skew-x a:hover {
    transform: skewX(-30deg);
}
.menu ul li.skew-y a:hover {
    transform: skewY(30deg);
}
.menu ul li.matrix a:hover {
    transform: matrix(1, 1, -1, 0, 0, 0);
}
.menu ul li.rotate-y a:hover {
    transform:rotateY(120deg);
}
.menu ul li.rotate-z a:hover {
    transform:rotateZ(120deg);
}
.menu ul li.perspective a:hover {
    transform:perspective(50px) rotateY(30deg);
}
.menu ul li.transform-origin a {
    transform-origin: left;
}

部分html代碼：

<div class="menu">
    <ul class="clearfix">
        <li class="item translate"><a href="#">Translate</a></li>
        <li class="item translate-x"><a href="#">TranslateX</a></li>
        <li class="item translate-y"><a href="#">TranslateY</a></li>
        <li class="item rotate"><a href="#">Rotate</a></li>
        <li class="item scale"><a href="#">Scale</a></li>
        <li class="item scale-x"><a href="#">ScaleX</a></li>
        <li class="item scale-y"><a href="#">ScaleY</a></li>
        <li class="item skew"><a href="#">Skew</a></li>
        <li class="item skew-x"><a href="#">SkewX</a></li>
        <li class="item skew-y"><a href="#">SkewY</a></li>
        <li class="item matrix"><a href="#">Matrix</a></li>
        <li class="item rotate-y"><a href="#">RotateY</a></li>
        <li class="item rotate-z"><a href="#">RotateZ</a></li>
        <li class="item perspective"><a href="#">perspective</a></li>
    </ul>
</div>