亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

CSS3 3D 轉(zhuǎn)換

學(xué)習(xí)本節(jié)前先看一下3D坐標(biāo)軸

1010.jpg

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

3D Transforms

CSS3 允許您使用 3D 轉(zhuǎn)換來對元素進(jìn)行格式化。

在本章中，您將學(xué)到其中的一些 3D 轉(zhuǎn)換方法：

rotateX()

rotateY()

瀏覽器支持

1019.png

rotateX() 方法

rotateX()方法，圍繞其在一個給定度數(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()方法，圍繞其在一個給定度數(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è)置為離頁面200像素的位置 */
        perspective:200px;
    }
    #test1{
        width:400px;
        height:400px;
        position:relative;
        /* 相當(dāng)于指定一個3D的空間 */
        transform-style:preserve-3d;
    }
    #div2{
        width:400px;
        height:400px;
        position:relative;
        background:lightcoral;
        /* 指定變換效果，變換時間為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    定義元素在不面對屏幕時是否可見。    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 個值的 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)換，通過給定一個 X 軸的值。    

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

scaleZ(z)    定義 3D 縮放轉(zhuǎn)換，通過給定一個 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)換元素的透視視圖。    


Weiter lernen
||
<!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 #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>
einreichenCode zurücksetzen