CSS3 3D 轉換

CSS3 3D 轉換

3D Transforms

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

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

#rotateX()
rotateY( )

rotateX() 方法

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

實例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <style>
        div
        {
            width:100px;
            height:75px;
            background-color: #f4ff99;
            border:1px solid black;
        }
        div#div2
        {
            transform:rotateX(120deg);
            -webkit-transform:rotateX(120deg); /* Safari and Chrome */
        }
    </style>
</head>
<body>
<div>PHP.CN</div>
<div id="div2">HELLO</div>
</body>
</html>

執行程式嘗試

rotateY() 方法

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <style>
        div
        {
            width:100px;
            height:75px;
            background-color:red;
            border:1px solid black;
        }
        div#div2
        {
            transform:rotateY(130deg);
            -webkit-transform:rotateY(130deg); /* Safari and Chrome */
        }
    </style>
</head>
<body>
<div>Hello</div>
<div id="div2">Hello.</div>
</body>
</html>

執行程式嘗試

轉換屬性

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

#transform向元素套用2D 或3D 轉換。 3transform-origin允許你改變被轉換元素的位置。 3transform-style規定被巢狀元素如何在 3D 空間中顯示。 3perspective規定 3D 元素的透視效果。 3perspective-origin#規定 3D 元素的底部位置。 3backface-visibility定義元素在不面對螢幕時是否可見。

屬性	#描述	CSS

###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> div { width:100px; height:75px; background-color: #f4ff99; border:1px solid black; } div#div2 { transform:rotateX(120deg); -webkit-transform:rotateX(120deg); /* Safari and Chrome */ } </style> </head> <body> <div>PHP.CN</div> <div id="div2">HELLO</div> </body> </html>

重置程式碼

自動運行

提交

預覽 Clear