CSS3 transform 屬性

2018-11-26 11:38 更新

瀏覽器支持

表格中的數(shù)字表示支持該屬性的第一個(gè)瀏覽器版本號。

緊跟在 -webkit-, -ms- 或 -moz- 前的數(shù)字為支持該前綴屬性的第一個(gè)瀏覽器版本號。


屬性定義及使用說明

Transform屬性應(yīng)用于元素的2D或3D轉(zhuǎn)換。這個(gè)屬性允許你將元素旋轉(zhuǎn)，縮放，移動，傾斜等。

為了更好地理解Transform屬性,請查看在線實(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) div 元素：

div
{
transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 */
-webkit-transform:rotate(7deg); /* Safari and Chrome */
}
嘗試一下 ?

更多實(shí)例

旋轉(zhuǎn)圖片
這個(gè)例子演示了如何創(chuàng)建"polaroid"照片和旋轉(zhuǎn)圖片。


以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號