Transform This property allows us to move, scale, rotate, or skew elements
The value of the Transform property is as follows:
1, none no transformation
2, translate can use length or percentage value, in the horizontal direction, vertical direction or two square upward
TranslateX panning Elements
Translatey
eg. div{
Transform:translate (200px,200px); Move 200px to the right, similar to relative positioning
Transform:translatex (200px);
Transform:translatey (200px);
}
3, Scale[skel] can use numeric values, in the horizontal direction, vertical direction or two direction of the scaling element
ScaleX
ScaleY
eg. div{
Transform:scale (1.5); The elements are magnified 1.5 times times the original
Transform:scalex (1.5);
Transform:scaley (1.5);
}
4. Rotate can use angle value, rotate element
eg. div{
Transform:rotate ( -45DEG); The element is centered as a point, rotated-45 degrees.
}
5, Skew[skju] can use the angle value, in the horizontal direction, the vertical direction or the two direction causes the element to tilt
Skewx a certain angle
Skewy
eg. div{
Transform:skew (45DEG,20DEG); X, Y axis tilt 45 degrees, 20 degrees respectively
Transform:skewx (45DEG);
Transform:skewy (45DEG);
}
6, matrix 4~6 values, comma separated, specify custom transformations
Specify the rectangle by six numeric values, its internal formula calculation is more complex, details Baidu
Different values can accumulate, separated by a space
eg. div{
Transform:rotate ( -45deg) scale (1.5);
}
Second, transform-origin change the base point of the element deformation, the default is the central position of the element, if the datum point is changed.
It will deform according to this datum point.
Attribute values can use keywords, and percentages and specific values can be used
The key words are as follows:
1. Specify the position of the x-axis left, center, right
2, specify the y-axis position top, center, bottom
eg. div{
Transform-origin:left top;
transform-origin:0px 0px;
transform-origin:0% 0%;
}
Note: Transform and transform-origin require a relatively high version, so in addition to the standard, it is best to write with a prefix.
Application scenario: There are several frames on the page, the user clicks on the image frame, the frame is based on the upper left corner, and the drop animation is displayed.
Finally: This blog is just a little bit wrong to explain the transform properties, more detailed analysis please see another blog: CSS3 Properties Transform detailed Chenghou (rotation: rotate, scaling: scale, tilt: Skew, move: Translate)
