教育行業(yè)A股IPO第一股（股票代碼 003032）

全國咨詢/投訴熱線：400-618-4000

CSS3 rotateX和rotateY用法介紹

更新時間:2021年11月02日15時52分 來源:傳智教育 瀏覽次數(shù):

在3D變形中可以讓元素圍繞X軸、Y軸、Z軸進行旋轉(zhuǎn)，下面將針對CSS3中的rotateX()、rotateY()函數(shù)進行具體介紹。

1.rotateX()方法

rotateX()函數(shù)用于指定元素圍繞X軸旋轉(zhuǎn)，其基本語法格式如下。

transform: rotateX(a);

在上述語法格式中，參數(shù)a用于定義旋轉(zhuǎn)的角度值，單位為deg，其值可以是正數(shù)也可以是負數(shù)。如果值為正，元素將圍繞X軸順時針旋轉(zhuǎn);反之，如果值為負，元素圍繞X軸逆時針旋轉(zhuǎn)。

下面，通過一個案例來演示rotateX()函數(shù)的使用，如下所示。

<!Doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>rotateX()方法|http://web.itheima.com 黑馬程序員高手班</title>
    <style>
        div{
            width: 100px;
            height: 50px;
            background-color: #FF0;
            border: 1px solid black;
        }
        #div2{
            transform: rotateX(45deg);　　　　　　  /*元素圍繞X軸旋轉(zhuǎn)*/
            -ms-transform: rotateX(45deg);　　　　  /* IE9瀏覽器兼容代碼 */
            -webkit-transform: rotateX(45deg);　　　/*Safari andChrome瀏覽器兼容代碼 */
            -moz-transform: rotateX(45deg);　　　   /*Firefox覽器兼容代碼*/
            -o-transform: rotateX(45deg);　　　　　 /*Opera瀏覽器兼容代碼*/
        }
    </style>
</head>
<body>
    <div>元素原來的位置</div>
    <div id="div2">元素旋轉(zhuǎn)后的位置</div>
</body>
</html>

運行代碼，元素將圍繞X軸順時針旋轉(zhuǎn)45°，效果如圖所示。

rotateX方法

2.rotateY()方法

rotateY()函數(shù)指定一個元素圍繞Y軸旋轉(zhuǎn)，其基本語法格式如下。

transform: rotateY(a);

在上述語法中，參數(shù)a與rotateX(a)中的a含義相同，用于定義旋轉(zhuǎn)的角度。如果值為正，元素圍繞Y軸順時針旋轉(zhuǎn)；反之，如果值為負，元素圍繞Y軸逆時針旋轉(zhuǎn)。

接下來，在上面案例的基礎(chǔ)上演示元素圍繞Y軸旋轉(zhuǎn)的效果。將上面案例中的第14～18行代碼更改為：

transform: rotateY(45deg);　　　　　　/*元素圍繞Y軸旋轉(zhuǎn)*/
-ms-transform: rotateY(45deg);　　　　/* IE9瀏覽器兼容代碼 */
-webkit-transform: rotateY(45deg);　　/* Safari andChrome瀏覽器兼容代碼 */
-moz-transform: rotateY(45deg);　　　/*Firefox覽器兼容代碼*/
-o-transform: rotateY(45deg);　　　　　/*Opera瀏覽器兼容代碼*/

此時，刷新瀏覽器頁面，元素將圍繞Y軸順時針旋轉(zhuǎn)45°，效果如下圖所示。

元素圍繞Y軸順時針旋轉(zhuǎn)

注意：

rotateZ()函數(shù)和rotateX()函數(shù)、rotateY()函數(shù)功能一樣，區(qū)別在于rotateZ()函數(shù)用于指定一個元素圍繞Z軸旋轉(zhuǎn)。如果僅從視覺角度上看，rotateZ()函數(shù)讓元素順時針或逆時針旋轉(zhuǎn)，與rotate()效果等同，但它不是在2D平面上的旋轉(zhuǎn)。



猜你喜歡

transition-timing-function屬性值有哪些？怎么使用？

如何阻止瀏覽器默認行為和阻止事件傳播?

css3漸變屬性怎么使用？C3漸變用法教程

傳智教育HTML&JS+前端課程

0 分享到：
和我們在線交談！