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)定義3D 轉換，使用16 個值的4x4 矩陣。 | |
| ,y, | z) |
| translateX( | x) |
| translateY( | y) |
| translateZ(z)定義 3D 轉化，僅使用 Z 軸的值。 | |
| ,y, | z) |
| scaleX( | x) |
| scaleY( | y) |
| scaleZ(z)定義 3D 縮放轉換，透過給定一個 Z 軸的值。 | rotate3d( | x
| ,z, | angle) |
| rotateX( | angle) |
| rotateY( | angle) |
| rotateZ( | angle) |
以上是css3轉換有哪些屬性的詳細內容。更多資訊請關注PHP中文網其他相關文章！
