溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了“css3中的轉換屬性有哪些”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“css3中的轉換屬性有哪些”這篇文章吧。
css3轉換屬性有6個：1、transform；2、transform-origin；3、transform-style；4、perspective；5、perspective-origin；6、backface-visibility。
本教程操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。
CSS3 轉換可以對元素進行移動、縮放、轉動、拉長或拉伸。
css3轉換屬性（2D/3D 轉換）
| 屬性 | 說明 | CSS |
|---|---|---|
| transform | 適用于2D或3D轉換的元素 | 3 |
| transform-origin | 允許您更改轉化元素位置 | 3 |
| transform-style | 3D空間中的指定如何嵌套元素 | 3 |
| perspective | 指定3D元素是如何查看透視圖 | 3 |
| perspective-origin | 指定3D元素底部位置 | 3 |
| backface-visibility | 定義一個元素是否應該是可見的，不對著屏幕時 | 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 轉換</div>
<div id="rotate3D">3D 轉換</div>
</body>
</html>
擴展知識：
2D 轉換方法
| 函數 | 描述 |
|---|---|
| matrix(n,n,n,n,n,n) | 定義 2D 轉換，使用六個值的矩陣。 |
| translate(x,y) | 定義 2D 轉換，沿著 X 和 Y 軸移動元素。 |
| translateX(n) | 定義 2D 轉換，沿著 X 軸移動元素。 |
| translateY(n) | 定義 2D 轉換，沿著 Y 軸移動元素。 |
| scale(x,y) | 定義 2D 縮放轉換，改變元素的寬度和高度。 |
| scaleX(n) | 定義 2D 縮放轉換，改變元素的寬度。 |
| scaleY(n) | 定義 2D 縮放轉換，改變元素的高度。 |
| rotate(angle) | 定義 2D 旋轉，在參數中規定角度。 |
| skew(x-angle,y-angle) | 定義 2D 傾斜轉換，沿著 X 和 Y 軸。 |
| skewX(angle) | 定義 2D 傾斜轉換，沿著 X 軸。 |
| skewY(angle) | 定義 2D 傾斜轉換，沿著 Y 軸。 |
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 轉換元素的透視視圖。 |
以上是“css3中的轉換屬性有哪些”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
