CSS3 3D 轉換LOGIN

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>
章節課件