transform syntax:
transform：none | <transform-function>+
transform-function list:
matrix() = matrix(<number>[,<number>]{5,5})
matrix3d() = matrix3d(<number>[,<number>]{15,15})
translate() = translate(<translation-value>[,<translation-value>]?)
translate3d() = translate3d(<translation-value>,<translation-value>,<length>)
translatex() = translatex(<translation-value>)
translatey() = translatey(<translation-value>)
translatez() = translatez(<length>)
rotate() = rotate(<angle>)
rotate3d() = rotate3d(<number>,<number>,<number>,<angle>)
rotatex() = rotatex(<angle>)
rotatey() = rotatey(<angle>)
rotatez() = rotatez(<angle>)
scale() = scale(<number>[,<number>]?)
scale3d() = scale3d(<number>,<number>,<number>)
scalex() = scalex(<number>)
scaley() = scaley(<number>)
scalez() = scalez(<number>)
skew() = skew(<angle>[,<angle>]?)
skewx() = skewx(<angle>)
skewy() = skewy(<angle>)
perspective() = perspective(<length>)
<translation-value> = <length> | <percentage>Default value:none
Applies to: all block-level elements and some inline elements
Inheritance: None
Animation: Yes
Computed value: Specifies a value, but relative lengths are converted to absolute lengths
Media: Visual
transform value:
none: No conversion
2D Transform Functions：
matrix(): Specify a 2D transformation in the form of a six-value (a, b, c, d, e, f) transformation matrix, which is equivalent to directly applying a [a, b, c, d, e, f] transformation matrix
translate(): Specifies the 2D translation of the object. The first parameter corresponds to the X-axis, and the second parameter corresponds to the Y-axis. If the second parameter is not provided, the default value is 0
translatex(): Specify the translation of the X-axis (horizontal direction) of the object
translatey(): Specify the translation of the object's Y axis (vertical direction)
rotate(): To specify the 2D rotation of the object, you need to first define the <' transform-origin '> attribute.
scale(): Specifies the 2D scale of the object. The first parameter corresponds to the X-axis, and the second parameter corresponds to the Y-axis. If the second parameter is not provided, the value of the first parameter will be used by default.
scalex(): Specify the (horizontal) scaling of the object's X-axis
scaley(): Specifies the (vertical) scaling of the Y-axis of the object
skew(): Specifies the object's skew transformation (oblique distortion). The first parameter corresponds to the X-axis, and the second parameter corresponds to the Y-axis. If the second parameter is not provided, the default value is 0
skewx(): Specifies the (horizontal) distortion of the object's X-axis
skewy(): Specify the (vertical) distortion of the Y-axis of the object 3D Transform Functions:
matrix3d(): Specify a 3D transformation in the form of a 4x4 matrix
translate3d(): Specifies the 3D displacement of the object. The first parameter corresponds to the X axis, the second parameter corresponds to the Y axis, and the third parameter corresponds to the Z axis. Parameters are not allowed to be omitted.
translatez(): Specify the translation of the Z axis of the object
rotate3d(): Specify the 3D rotation angle of the object. The first three parameters represent the directions of rotation x, y, and z respectively. The fourth parameter represents the angle of rotation. The parameters cannot be omitted.
rotatex(): Specify the rotation angle of the object on the x-axis
rotatey(): Specify the rotation angle of the object on the y-axis
rotatez(): Specify the rotation angle of the object on the z-axis
scale3d(): Specifies the 3D scaling of the object. The first parameter corresponds to the X axis, the second parameter corresponds to the Y axis, and the third parameter corresponds to the Z axis. Parameters are not allowed to be omitted.
scalez(): Specifies the z-axis scaling of the object
perspective(): Specifies the perspective distance Description: Sets or retrieves the transformation of the object.
The corresponding script feature is transform.
transform example:
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>2D transform_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="https://www.4s5.cn/" />
<style>
h1{clear:both;padding-top:10px;font-size:16px;font-family:Arial;}
.test{zoom:1;width:700px;margin:0;padding:0;list-style:none;}
.test li{float:left;margin:20px 30px 0 0;border:1px solid #000;}
.test li p{width:300px;height:100px;margin:0;background:#ddd;}
.test .matrix{-moz-transform:matrix(0,1,1,1,10px,10px);-webkit-transform:matrix(0,1,1,1,10,10);-ms-transform:matrix(0,1,1,1,10,10);transform:matrix(0,1,1,1,10,10);}
.test .translate p{-moz-transform:translate(5%,10px);-webkit-transform:translate(10px,10px);-ms-transform:translate(10px,10px);transform:translate(10px,10px);}
.test .translate2 p{-moz-transform:translate(-10px,-10px);-webkit-transform:translate(-10px,-10px);-ms-transform:translate(-10px,-10px);transform:translate(-10px,-10px);}
.test .translateX p{-moz-transform:translateX(20px);-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px);}
.test .translate3 p{-moz-transform:translate(20px);-webkit-transform:translate(20px);-ms-transform:translate(20px);transform:translate(20px);}
.test .translateY p{-moz-transform:translateY(10px);-webkit-transform:translateY(10px);-ms-transform:translateY(10px);transform:translateY(10px);}
.test .translate4 p{-moz-transform:translate(0,10px);-webkit-transform:translate(0,10px);-ms-transform:translate(0,10px);transform:translate(0,10px);}
.test .rotate{-moz-transform:rotate(-5deg);-webkit-transform:rotate(-5deg);-ms-transform:rotate(-5deg);transform:rotate(-5deg);}
.test .rotate2{-moz-transform:rotate(5deg);-webkit-transform:rotate(5deg);-ms-transform:rotate(5deg);transform:rotate(5deg);}
.test .scale{-moz-transform:scale(.8);-webkit-transform:scale(.8);-ms-transform:scale(.8);transform:scale(.8);}
.test .scale2{-moz-transform:scale(1.2);-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2);}
.test .skew{-moz-transform:skew(-5deg);-webkit-transform:skew(-5deg);-ms-transform:skew(-5deg);transform:skew(-5deg);}
.test .skew2{-moz-transform:skew(-5deg,-5deg);-webkit-transform:skew(-5deg,-5deg);-ms-transform:skew(-5deg,-5deg);transform:skew(-5deg,-5deg);}
</style>
</head>
<body>
<h1>矩阵变换：matrix()</h1>
<ul class="test">
<li class="matrix">
<p>transform:matrix(0,1,1,1,10,10)</p>
</li>
</ul>
<h1>平移：translate(), translateX(), translateY()</h1>
<ul class="test">
<li class="translate">
<p>transform:translate(5%,10px)</p>
</li>
<li class="translate2">
<p>transform:translate(-10px,-10px)</p>
</li>
<li class="translateX">
<p>transform:translateX(20px)</p>
</li>
<li class="translate3">
<p>transform:translate(20px)</p>
</li>
<li class="translateY">
<p>transform:translateY(10px)</p>
</li>
<li class="translate4">
<p>transform:translate(0,10px)</p>
</li>
</ul>
<h1>旋转：rotate()</h1>
<ul class="test">
<li class="rotate">
<p>transform:rotate(-15deg)</p>
</li>
<li class="rotate2">
<p>transform:rotate(15deg)</p>
</li>
</ul>
<h1>缩放：scale()</h1>
<ul class="test">
<li class="scale">
<p>transform:scale(.8)</p>
</li>
<li class="scale2">
<p>transform:scale(1.2)</p>
</li>
</ul>
<h1>扭曲：skew()</h1>
<ul class="test">
<li class="skew">
<p>transform:skew(-5deg)</p>
</li>
<li class="skew2">
<p>transform:skew(-5deg,-5deg)</p>
</li>
</ul>
</body>
</html>
