Transforrm屬性是控制2D或者3D元素的縮放涧郊，傾斜褥影，移動(dòng)恃疯，旋轉(zhuǎn)
<html><!DOCTYPE html>
<html>
<head>
<style>
#div1
{
width:120px;
height:100px;
background-color:yellow;
border:1px solid black;
transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 */
-webkit-transform:rotate(7deg); /* Safari and Chrome */
}
</style>
<script>
function rotate(value)
{
document.getElementById('div1').style.webkitTransform="rotate(" + value + "deg)";
document.getElementById('div1').style.msTransform="rotate(" + value + "deg)";
document.getElementById('div1').style.MozTransform="rotate(" + value + "deg)";
document.getElementById('div1').style.OTransform="rotate(" + value + "deg)";
document.getElementById('div1').style.transform="rotate(" + value + "deg)";
document.getElementById('span1').innerHTML=value + "deg";
}
</script>
</head>
<body>
<p>Rotate the yellow div element:</p>
<div id="div1">HELLO</div>
Rotate: <br>
<input type="range" min="-360" max="360" value="7" onchange="rotate(this.value)" /><br>
transform: rotate(<span id="span1">7deg</span>);
</body>
</html>
上面代碼復(fù)制到html文件你大概會(huì)明白transform作用
transform屬性詳解：
none 不進(jìn)行任何轉(zhuǎn)換
matrix 進(jìn)行2D轉(zhuǎn)換，6個(gè)值 語法
transform: matrix(2, 2, 0, 2, 45, 0);
translatr 定義2D轉(zhuǎn)換 語法
transform: translate(45px, 1em); transform: translate(45px, 45px);
scale 2D縮放 語法
transform: scale(2, 2);
rotate 2D旋轉(zhuǎn) 語法
transform: rotate(45deg);
skew 2D傾斜 語法
transform: skew(45deg, 45deg);
perspective 3D轉(zhuǎn)換 語法
perspective: 100px;
transform-origin X职祷，Y盖灸，Z軸旋轉(zhuǎn)中心點(diǎn)2D（X蚁鳖、Y），3D（X赁炎、Y醉箕、Z） 語法
transform-origin: 100% 0% 0px;
none：定義進(jìn)行轉(zhuǎn)換
matrix(n,n,n,n,n,n)：進(jìn)行2D轉(zhuǎn)換，需要6個(gè)方位值
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)：定義3的轉(zhuǎn)換，需要16個(gè)4*4矩陣值
translate(x,y)：定義2D轉(zhuǎn)換
translate3d(x,y)：定義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)換元素定義透視視圖粟焊。
