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!