The example on w3c is written like this: ·
div
{
transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 */
-moz-transform:rotate(7deg); /* Firefox */
-webkit-transform:rotate(7deg); /* Safari and Chrome */
-o-transform:rotate(7deg); /* Opera */
}
Well, I found that I was wrong, this thing is not generally easy, and there are more than N functions that can be used. details as follows:
//code from http://caibaojian.com/transform.html Formal grammar: <transform-function> [<transform-function>]* | none
transform: none transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0) transform: translate(12px, 50%) transform: translateX(2em) transform: translateY(3in) transform: scale(2, 0.5) transform: scaleX(2) transform: scaleY(0.5) transform: rotate(0.5turn) transform: skewX(30deg) transform: skewY(1.07rad) transform: matrix3d(1.0, 2.0, 3.0, 4.0, 5.0, 6.0, 7.0, 8.0, 9.0, 10.0, 11.0, 12.0, 13.0, 14.0, 15.0, 16.0) transform: translate3d(12px, 50%, 3em) transform: translateZ(2px) transform: scale3d(2.5, 1.2, 0.3) transform: scaleZ(0.3) transform: rotate3d(1, 2.0, 3.0, 10deg) transform: rotateX(10deg) transform: rotateY(10deg) transform: rotateZ(10deg) transform: perspective(17px) transform: translateX(10px) rotate(10deg) translateY(5px) Below I briefly introduce some of the more commonly used methods
1. Rotate rotate
rotate(<angle>) : Specify a 2D rotation (2D rotation) for the original element through the specified angle parameter. The definition of the transform -origin attribute is required first. transform-origin defines the base point of the rotation, where angle refers to the rotation angle. If the set value is positive, it means clockwise rotation, and if the set value is negative, it means counterclockwise rotation. Such as: transform:rotate(30deg):
2. Mobile translate
We divide the translation into three cases: translate(x,y) moves in the horizontal and vertical directions at the same time (that is, the X-axis and the Y-axis move at the same time); translateX(x) moves only in the horizontal direction (the X-axis moves); translateY( Y) only moves in the vertical direction (Y-axis movement), the specific usage is as follows:
transform:translate(100px,20px):
transform:translateX(100px):
transform:translateY(20px):
3. Zoom scale
Scaling scale is very similar to moving translate. It also has three situations: scale(x,y) makes the element scale both horizontally and vertically (that is, the X and Y axes are scaled at the same time); scaleX(x) The element is only horizontally Direction scaling (X-axis scaling); scaleY(y) elements are only scaled vertically (Y-axis scaling), but they have the same scaling center point and base, whose center point is the center of the element, and the scaling base is 1, if its If the value is greater than 1, the element will be enlarged, and if the value is less than 1, the element will be reduced. Let's take a look at the specific use of these three situations:
transform:scale(2,1.5):
transform:scaleX(2):
transform:scaleY(2):
Four, twist skew
Distorted skew, like translate and scale, also has three situations: skew(x,y) twists the element in both the horizontal and vertical directions (the X-axis and Y-axis are twisted and deformed at a certain angle value at the same time); skewX(x) only Twist the element in the horizontal direction (X-axis distortion); skewY(y) only distorts the element in the vertical direction (Y-axis distortion), the specific use is as follows:
transform:skew(30deg,10deg):
transform:skewX(30deg)
transform:skewY（10deg）
5. Matrix
matrix(<number>, <number>, <number>, <number>, <number>, <number>)