CSS3 教程
CSS3 transform 屬性
實(shí)例
旋轉(zhuǎn) div 元素：
div
{
transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 */
-webkit-transform:rotate(7deg); /* Safari and Chrome */
}
運(yùn)行代碼 ?
瀏覽器支持
表格中的數(shù)字表示支持該屬性的第一個(gè)瀏覽器版本號(hào)。
緊跟在 -webkit-, -ms- 或 -moz- 前的數(shù)字為支持該前綴屬性的第一個(gè)瀏覽器版本號(hào)。
| 屬性 | |||||
|---|---|---|---|---|---|
| transform (2D) | 36.0 4.0?-webkit- |
10.0 9.0?-ms- |
16.0 3.5?-moz- |
9.0 3.2?-webkit- |
23.0 15.0?-webkit- 10.5?-o- |
| transform (3D) | 36.0 12.0?-webkit- |
12.0 | 10.0 | 16.0 10.0?-moz- |
9.0 4.0?-webkit- |
屬性定義及使用說明
Transform屬性應(yīng)用于元素的2D或3D轉(zhuǎn)換。這個(gè)屬性允許你將元素旋轉(zhuǎn)，縮放，移動(dòng)，傾斜等。
為了更好地理解Transform屬性,請(qǐng)查看 在線實(shí)例.
| 默認(rèn)值： | none |
|---|---|
| 繼承： | no |
| 版本： | CSS3 |
| JavaScript 語法： | object.style.transform="rotate(7deg)" |
語法
transform: none|transform-functions;
| 值 | 描述 |
|---|---|
| none | 定義不進(jìn)行轉(zhuǎn)換。 |
| matrix(n,n,n,n,n,n) | 定義 2D 轉(zhuǎn)換，使用六個(gè)值的矩陣。 |
| matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) | 定義 3D 轉(zhuǎn)換，使用 16 個(gè)值的 4x4 矩陣。 |
| translate(x,y) | 定義 2D 轉(zhuǎn)換。 |
| translate3d(x,y,z) | 定義 3D 轉(zhuǎn)換。 |
| translateX(x) | 定義轉(zhuǎn)換，只是用 X 軸的值。 |
| translateY(y) | 定義轉(zhuǎn)換，只是用 Y 軸的值。 |
| translateZ(z) | 定義 3D 轉(zhuǎn)換，只是用 Z 軸的值。 |
| scale(x[,y]?) | 定義 2D 縮放轉(zhuǎn)換。 |
| scale3d(x,y,z) | 定義 3D 縮放轉(zhuǎn)換。 |
| scaleX(x) | 通過設(shè)置 X 軸的值來定義縮放轉(zhuǎn)換。 |
| scaleY(y) | 通過設(shè)置 Y 軸的值來定義縮放轉(zhuǎn)換。 |
| scaleZ(z) | 通過設(shè)置 Z 軸的值來定義 3D 縮放轉(zhuǎn)換。 |
| rotate(angle) | 定義 2D 旋轉(zhuǎn)，在參數(shù)中規(guī)定角度。 |
| 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)。 |
| skew(x-angle,y-angle) | 定義沿著 X 和 Y 軸的 2D 傾斜轉(zhuǎn)換。 |
| skewX(angle) | 定義沿著 X 軸的 2D 傾斜轉(zhuǎn)換。 |
| skewY(angle) | 定義沿著 Y 軸的 2D 傾斜轉(zhuǎn)換。 |
| perspective(n) | 為 3D 轉(zhuǎn)換元素定義透視視圖。 |
更多實(shí)例
旋轉(zhuǎn)圖片
這個(gè)例子演示了如何創(chuàng)建"polaroid"照片和旋轉(zhuǎn)圖片。