Home > Article > Web Front-end > How to implement rotation with a point as a fixed point in css
Css method to rotate a point as a fixed point: 1. Create a new HTML file; 2. Import images through img; 3. Add the css attribute to the img tag as "@keyframes rotate{0%{transform: rotate (0deg);}100%{transform: rotate(360deg);}}" can realize rotation with a point as a fixed point.
The operating environment of this tutorial: Windows 10 system, CSS3 version, DELL G3 computer
How to achieve fixed-point rotation with css ?
css to realize image rotation and set the rotation point
First do some technical knowledge popularization:
Rotate div elements:
div
{
transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 */
-moz-transform:rotate(7deg); /* Firefox */
-webkit-transform:rotate(7deg); /* Safari 和 Chrome */
-o-transform:rotate(7deg); /* Opera */
}
The transform attribute applies a 2D or 3D transformation to the element. This property allows us to rotate, scale, move or tilt the element.
transform: none|transform-functions;
| Value | Description |
|---|---|
| none | Definitions are not converted. |
| matrix(n,n,n,n,n ,n) | Define 2D transformation, using a matrix of six values. |
| matrix3d(n,n,n,n,n ,n,n,n,n,n,n,n,n,n,n,n) | Define 3D Conversion, using a 4x4 matrix of 16 values. |
| translate(x,y) | Define 2D transformation. |
| translate3d(x,y,z) | Define 3D transformation. |
| translateX(x) | Define the transformation, just using the X-axis value. |
| translateY(y) | Define the transformation, just using the Y-axis value. |
| translateZ(z) | Define a 3D transformation, just using the Z axis value. |
| scale(x,y) | Define 2D scaling transformation. |
| scale3d(x,y,z) | Define the 3D scaling transformation. |
| scaleX(x) | Defines the scaling transformation by setting the value of the X axis. |
| scaleY(y) | Defines the scaling transformation by setting the value of the Y axis. |
| scaleZ(z) | Defines the 3D scaling transformation by setting the value of the Z axis. |
| rotate(angle) | Define 2D rotation, specify the angle in the parameter. |
| rotate3d(x,y,z,angle) | Define 3D rotation. |
| rotateX(angle) | Defines a 3D rotation along the X-axis. |
| rotateY(angle) | Defines a 3D rotation along the Y axis. |
| rotateZ(angle) | Defines a 3D rotation along the Z axis. |
| skew(x-angle,y-angle) | Define the 2D skew along the X and Y axes Convert. |
| skewX(angle) | Define the 2D skew transformation along the X-axis. |
| skewY(angle) | Define the 2D skew transformation along the Y axis. |
| perspective(n) | Define a perspective view for a 3D transform element. |
# Then the problem that everyone encounters most when doing it is the starting point, which is the problem of the rotation point. I want him to turn around like this, why doesn't he obey?
This is about to talk about, transform origin
Set the base point position of the rotated element:
div
{
transform: rotate(45deg);
transform-origin:20% 40%;
-ms-transform: rotate(45deg); /* IE 9 */
-ms-transform-origin:20% 40%; /* IE 9 */
-webkit-transform: rotate(45deg); /* Safari 和 Chrome */
-webkit-transform-origin:20% 40%; /* Safari 和 Chrome */
-moz-transform: rotate(45deg); /* Firefox */
-moz-transform-origin:20% 40%; /* Firefox */
-o-transform: rotate(45deg); /* Opera */
-o-transform-origin:20% 40%; /* Opera */
}
The transform-origin attribute allows you to change the position of the element being transformed.
2D transform elements can change the x and y axes of the element. 3D transform elements can also change their Z-axis.
To better understand the transform-origin property.
Safari/Chrome users: To better understand the use of the transform-origin property for 3D transformations.
Note: This attribute must be used together with the transform attribute.
transform-origin: x-axis y-axis z-axis;
| Value | Description |
|---|---|
| x-axis |
Define where the view is placed on the X-axis. Possible values:
|
Defines where on the Y-axis the view is placed. Possible values:
|
|
| Defines where on the Z axis the view is placed. Possible values: |
|
The above is the detailed content of How to implement rotation with a point as a fixed point in css. For more information, please follow other related articles on the PHP Chinese website!
