css3轉換有哪些屬性-前端問答-PHP中文網

css3轉換有哪些屬性

青灯夜游

發布： 2022-01-13 14:12:38

原創

1582 人瀏覽過

css3轉換屬性有6個：1、transform；2、transform-origin；3、transform-style；4、perspective；5、perspective-origin；6、backface-visibility。

css3轉換有哪些屬性

本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

CSS3 轉換可以對元素進行移動、縮放、轉動、拉長或拉伸。

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>

登入後複製

css3轉換有哪些屬性

擴充知識：

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 轉換方法

n n,ntranslate3d(xz定義 3D 轉換。 x定義 3D 轉化，僅使用用於 X 軸的值。 y定義 3D 轉化，僅使用用於 Y 軸的值。 scale3d(xz定義 3D 縮放轉換。 x定義 3D 縮放轉換，透過給定一個 X 軸的值。 y定義 3D 縮放轉換，透過給定一個 Y 軸的值。 x,yangle定義3D 旋轉。 angle定義沿著 X 軸的 3D 旋轉。 angle定義沿著 Y 軸的 3D 旋轉。 angle定義沿著 Z 軸的 3D 旋轉。

#函數	說明
##matrix3d(n, n,n,n,n,n,n,n,n,n,n,	,
,n,n)定義3D 轉換，使用16 個值的4x4 矩陣。
,y,	)
translateX(	)
translateY(	)
translateZ(z)定義 3D 轉化，僅使用 Z 軸的值。
,y,	)
scaleX(	)
scaleY(	)
scaleZ(z)定義 3D 縮放轉換，透過給定一個 Z 軸的值。	rotate3d(
,z,	)
rotateX(	)
rotateY(	)
rotateZ(	)