溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

css3中的轉(zhuǎn)換屬性有哪些

發(fā)布時(shí)間：2022-01-13 14:36:37 來(lái)源：億速云 閱讀：356 作者：小新 欄目：web開(kāi)發(fā)

這篇文章主要為大家展示了“css3中的轉(zhuǎn)換屬性有哪些”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“css3中的轉(zhuǎn)換屬性有哪些”這篇文章吧。

css3轉(zhuǎn)換屬性有6個(gè)：1、transform；2、transform-origin；3、transform-style；4、perspective；5、perspective-origin；6、backface-visibility。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

CSS3 轉(zhuǎn)換可以對(duì)元素進(jìn)行移動(dòng)、縮放、轉(zhuǎn)動(dòng)、拉長(zhǎng)或拉伸。

css3中的轉(zhuǎn)換屬性有哪些

css3轉(zhuǎn)換屬性（2D/3D 轉(zhuǎn)換）

屬性說(shuō)明CSS
transform適用于2D或3D轉(zhuǎn)換的元素3
transform-origin允許您更改轉(zhuǎn)化元素位置3
transform-style3D空間中的指定如何嵌套元素3
perspective指定3D元素是如何查看透視圖3
perspective-origin指定3D元素底部位置3
backface-visibility定義一個(gè)元素是否應(yīng)該是可見(jiàn)的，不對(duì)著屏幕時(shí)3

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta name="charset" content="utf-8"/>
        <style type="text/css">
			#rotate2D, #rotate3D {
			    width: 80px;
			    height: 70px;
			    color: white;
			    font-weight: bold;
			    font-size: 15px;
			    padding: 10px;
			    float: left;
			    margin-right: 50px;
			    border-radius: 5px;
			    border: 1px solid #000000;
			    background: red;
			    margin: 10px;
				transition:transform 2s;
				-webkit-transition:transform 2s; /* Safari */
			}
			#rotate2D:hover{
				transform: rotate(180deg);
			}
			#rotate3D:hover{
				transform: rotateY(180deg);
			}
        </style>
    </head>
    <body>
       <div id="rotate2D">2D 轉(zhuǎn)換</div>
	   <div id="rotate3D">3D 轉(zhuǎn)換</div>
    </body>
</html>

css3中的轉(zhuǎn)換屬性有哪些

擴(kuò)展知識(shí)：

2D 轉(zhuǎn)換方法

函數(shù)描述
matrix(n,n,n,n,n,n)定義 2D 轉(zhuǎn)換，使用六個(gè)值的矩陣。
translate(x,y)定義 2D 轉(zhuǎn)換，沿著 X 和 Y 軸移動(dòng)元素。
translateX(n)定義 2D 轉(zhuǎn)換，沿著 X 軸移動(dòng)元素。
translateY(n)定義 2D 轉(zhuǎn)換，沿著 Y 軸移動(dòng)元素。
scale(x,y)定義 2D 縮放轉(zhuǎn)換，改變?cè)氐膶挾群透叨取?/td>
scaleX(n)定義 2D 縮放轉(zhuǎn)換，改變?cè)氐膶挾取?/td>
scaleY(n)定義 2D 縮放轉(zhuǎn)換，改變?cè)氐母叨取?/td>
rotate(angle)定義 2D 旋轉(zhuǎn)，在參數(shù)中規(guī)定角度。
skew(x-angle,y-angle)定義 2D 傾斜轉(zhuǎn)換，沿著 X 和 Y 軸。
skewX(angle)定義 2D 傾斜轉(zhuǎn)換，沿著 X 軸。
skewY(angle)定義 2D 傾斜轉(zhuǎn)換，沿著 Y 軸。

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 個(gè)值的 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)換，通過(guò)給定一個(gè) X 軸的值。
scaleY(y)定義 3D 縮放轉(zhuǎn)換，通過(guò)給定一個(gè) Y 軸的值。
scaleZ(z)定義 3D 縮放轉(zhuǎn)換，通過(guò)給定一個(gè) 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)換元素的透視視圖。

以上是“css3中的轉(zhuǎn)換屬性有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手