transform
?? [tr?ns?f?:m] ?? [tr?ns?f?:rm]
vt.Transform; ??, ??
vi.Change
n.[??] ??
CSS ?? ?? ???
Role: transform ??? ??? 2D ?? 3D ??? ?????. ? ??? ???? ??? ??, ?? ??, ?? ?? ??? ? ????. ?? ??? ? ? ????? ? ??? ?????.
??: ??transform: none|transform-functions
??: none? ??? ???? ????. ??(n,n,n,n,n,n)? 6? ?? ??? ???? 2D ??? ?????. Matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)? 16? ?? 4x4 ??? ???? 3D ??? ?????. translate(x,y)? 2D ??? ?????. translate3d(x,y,z)? 3D ??? ?????. translateX(x)? X? ?? ???? ??? ?????. translateY(y)? Y? ?? ???? ??? ?????. translateZ(z)? Z? ?? ???? 3D ??? ?????. scale(x,y)? 2D ???? ??? ?????. scale3d(x,y,z)? 3D ???? ??? ?????. scaleX(x) X? ?? ???? ?? ?? ??? ?????. scaleY(y)? Y? ?? ???? ?? ?? ??? ?????. scaleZ(z) Z? ?? ???? 3D ???? ??? ?????. ??(??) ????? ??? ???? 2D ??? ?????. Rotate3d(x,y,z,angle) ? 3D ??? ?????. rotateX(angle)? X?? ?? 3D ??? ?????. RotateY(angle)? Y?? ?? 3D ??? ?????. RotateZ(angle)? Z?? ?? 3D ??? ?????. Skew(x-angle,y-angle)? X?? Y?? ?? 2D ???? ??? ?????. SkewX(angle)? X?? ?? 2D ???? ??? ?????. SkewY(angle)? Y?? ?? 2D ???? ??? ?????. spective(n) 3D ?? ??? ???? ?????.?
??: Internet Explorer 10, Firefox ? Opera? ?? ??? ?????. Internet Explorer 9??? ?? -ms-transform ??(2D ???? ??)? ?????. Safari ? Chrome? ?? -webkit-transform ??(3D ? 2D ??)? ?????. Opera? 2D ??? ?????.
CSS ?? ?? ?
<!DOCTYPE html>
<html>
<head>
<style>
div
{
margin:30px;
width:200px;
height:100px;
background-color:yellow;
/* Rotate div */
transform:rotate(9deg);
-ms-transform:rotate(9deg); /* Internet Explorer */
-moz-transform:rotate(9deg); /* Firefox */
-webkit-transform:rotate(9deg); /* Safari 和 Chrome */
-o-transform:rotate(9deg); /* Opera */
}
</style>
</head>
<body>
<div>Hello World</div>
</body>
</html>???? ?? ?
??? ????? ??? "???? ??" ??? ?????