CSS3 3D 轉換

學習本節前先看3D座標軸

用X、Y、Z分別表示空間的3個維度，三個軸互相垂直。

3D Transforms

CSS3 可讓您使用 3D 轉換來對元素進行格式化。

在本章中，您將學到其中的一些3D 轉換方法：

rotateX()

rotateY()

瀏覽器支援

rotateX() 方法

rotateX()方法，圍繞其在一個給定度數X軸上旋轉的元素。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(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()方法，圍繞其在一個給定度數Y軸旋轉的元素。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style type="text/css">
    #test{
        width:400px;
        height:400px;
        position:absolute;
        margin-left:100px;
        margin-top: 100px;
        /* 光源设置为离页面200像素的位置 */
        perspective:200px;
    }
    #test1{
        width:400px;
        height:400px;
        position:relative;
        /* 相当于指定一个3D的空间 */
        transform-style:preserve-3d;
    }
    #div2{
        width:400px;
        height:400px;
        position:relative;
        background:lightcoral;
        /* 指定变换效果，变换时间为1S */
        -webkit-transition: all 1s;
    }
    #test #test1:hover #div2{
        /* 绕Y轴旋转180度 */
        -webkit-transform: rotateY(180deg);
    }
</style>
<body>
    <div id="test">
        <div id="test1">
            <div id="div2"></div>
        </div>
        
    </div>
</body>
</html>

轉換屬性

下表列出了所有的轉換屬性：

屬性描述 CSS

transform 應用2D 或3D 轉換給元素。 3

transform-origin 允許你改變被轉換元素的位置。 3

transform-style 規定被巢狀元素如何顯示在 3D 空間中。 3

perspective 規定 3D 元素的透視效果。 3

perspective-origin 規定 3D 元素的底部位置。 3

backface-visibility 定義元素在不面對螢幕時是否可見。 3

3D 轉換方法

函數 #說明

說明

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 轉換。

translateX(x) 定義 3D 轉化，僅使用用於 X 軸的值。

translateY(y) 定義 3D 轉化，僅使用用於 Y 軸的值。

translateZ(z) 定義 3D 轉化，僅使用 Z 軸的值。

scale3d(x,y,z) 定義 3D 縮放轉換。

scaleX(x) 定義 3D 縮放轉換，透過給定一個 X 軸的值。

scaleY(y) 定義 3D 縮放轉換，透過給定一個 Y 軸的值。

scaleZ(z) 定義 3D 縮放轉換，透過給定一個 Z 軸的值。

rotate3d(x,y,z,angle) 定義 3D 旋轉。

rotateX(angle) 定義沿著 X 軸的 3D 旋轉。

###rotateY(angle) 定義沿著 Y 軸的 3D 旋轉。 ######rotateZ(angle) 定義沿 Z 軸的 3D 旋轉。 ######perspective(n) 定義 3D 轉換元素的透視視圖。 ############

繼續學習

新建檔案

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <style type="text/css"> #test{ height:200px; width:200px; position:absolute; margin-top:100px; margin-left:100px; } #test #div2{ height:200px; width:200px; background:lightcoral; -webkit-transition: all .6s; position:relative; -webkit-transform:rotateX(-80deg) translateZ(200px); } #test:hover #div2{ -webkit-transform: rotateX(80deg); } </style> <body> <div id="test"> <div id="div2"></div> </div> </body> </html>

重置程式碼

自動運行

提交

預覽 Clear