首頁(yè)技術(shù)文章正文

CSS3 rotateX和rotateY用法介紹

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

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

1.rotateX()方法

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

transform: rotateX(a);

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

下面，通過(guò)一個(gè)案例來(lái)演示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>元素原來(lái)的位置</div>
    <div id="div2">元素旋轉(zhuǎn)后的位置</div>
</body>
</html>

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

2.rotateY()方法

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

transform: rotateY(a);

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

接下來(lái)，在上面案例的基礎(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瀏覽器兼容代碼*/

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

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

注意：

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

猜你喜歡

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

如何阻止瀏覽器默認(rèn)行為和阻止事件傳播?

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

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

上一篇：什么是Source Map？ 下一篇：JavaScript在客戶端和服務(wù)器端的區(qū)別