Objective
The CSS3 provides a 2D conversion function that enables elements to be moved, scaled, and rotated.
The property name of the 2d conversion is transform, using the method Transform:method (value).
2d conversion methods include translate, scale, rotate, skew, matrix, Translatex, ScaleY, etc. based on these expenditures.
Here, I'll introduce the following conversion methods:
First, we first insert a simple HTML code
|
<! DOCTYPE html>
<metacharset= "UTF-8" >
<TITLE>CSS3 2D Conversion </title>
<styletype= "Text/css" >
*{
margin:0;
padding:0;
}
#picture {
width:100%;
height:500px;
Background: #ccc;
}
img{
margin:100px 0 0 100px;
}
</style>
<body>
<divid= "Picture" >
</div>
</body>
|
This code allows us to put a picture in a div and pass this image to show you the following methods.
1.translate () Method: This method can have two parameters, separated by semicolons, representing the distance along the x-axis and the Y axis, which is relative to the picture's moving distance, and to the right X axis positive direction, downward to the Y axis positive direction. The following code indicates that the picture is moved to the right 100px and down by 100.
|
img{
margin:100px00100px;
Transform:translate (100px,100px);
}
|
2.rotate () Method: This method has a parameter, indicating the number of degrees to rotate, a positive number for clockwise rotation, then the negative number means counterclockwise rotation. Add deg (that is, degree, meaning of degree) after the degree of rotation you want to rotate. The following code indicates that the picture rotates 50 ° clockwise.
|
img{
margin:100px00100px;
Transform:rotate (50DEG);
｝
|
3.scale () Method: This method has two parameters, no units. Represents a multiple of the width and height magnification or reduction, if larger than 1, or smaller if less than one. The following code indicates that the width and height of the picture are magnified twice times.
|
img{
margin:100px00100px;
Transform:scale (2,2);
}
|
4.skew () Method: There are two parameters, respectively, that are tilted along the x-axis and Y axes, and the unit is deg, representing the angle. This method is not very easy to understand. First give the following code:
|
img{
margin:100px00100px;
Transform:skew (20DEG,0DEG);
｝
|
Indicates that the picture is rotated 20 degrees counterclockwise along the x axis.
This is not the way to use the skew () method
This is the way after using the skew () method.
Why, then? This is because the X and Y axes are in the direction of this:
When the x-axis rotates 20°, the picture is rotated counterclockwise, but note: This is not really a rotation, but the meaning of the stretch tilt, after the rotation, its width has not changed, and do a vertical line can be found that the height is unchanged.
The rotation is the same for the y-axis direction:
|
img{
margin:100px00100px;
Transform:skew (0DEG,20DEG);
｝
|
The code above indicates that the picture rotates to 20° along the y axis.
After the rotation, this is the following: It rotates in a clockwise direction.
What if we rotate both the x and y axes?
|
img{
margin:100px00100px;
Transform:skew (20DEG,20DEG);
｝
|
Then ultimately the effect of the combined effect, as shown in the following figure:
Having said so much, have we found that each time we offset, rotate, tilt, zoom in and out is relative to which point?
If you are a little careful, you will find that it is relative to the center point. It's going to use the Tansform-origin attribute here.
That is, by using this property, we can specify which point these methods use as the origin.
Let me give you a few examples
transform-origin:0 0 indicates that the upper-left corner is the original point.
transform-origin:100% 0; Indicates that the upper-right corner is the origin.
Transform-origin:0 100% indicates that the lower left corner is the origin.
transform-origin:100% 100%; indicates that the lower-right corner is the origin.
So we can tell that these values are set based on the upper left corner, the right side is the positive direction of the x axis, downward is the Y axis positive direction. If you do not set this property, the default value is
transform-origin:50% 50%, that is, the center as the base of the transformation.
Finally, I'd like to talk about browser compatibility, so in order for the code to run successfully in each browser, we need to add a few lines of code to the cascading style sheet, such as the Rotate () method:
|
Transform:rotate (30DEG);
-ms-transform:rotate (30DEG); /* IE 9 * *
-webkit-transform:rotate (30DEG); * Safari and Chrome * *
-o-transform:rotate (30DEG); /* Opera * *
-moz-transform:rotate (30DEG); * * Firefox *
|
In this way, we can run smoothly in every major browser!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
