css3轉換有哪些屬性 - tw511教學網

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轉換有哪些屬性的詳細內容，更多請關注TW511.COM其它相關文章！