How to implement rotation with a point as a fixed point in css-Front-end Q&A-php.cn

How to implement rotation with a point as a fixed point in css

藏色散人

Release： 2023-01-31 11:12:16

Original

2897 people have browsed it

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.

How to implement rotation with a point as a fixed point in css

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:

Example

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 */
}

Copy after login

Definition and usage

The transform attribute applies a 2D or 3D transformation to the element. This property allows us to rotate, scale, move or tilt the element.

Syntax

transform: none|transform-functions;

Copy after login

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

Example

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 */
}

Copy after login

Definition and Usage

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.

Syntax

transform-origin: x-axis y-axis z-axis;

Copy after login

y-axisz-axisDefines where on the Z axis the view is placed. Possible values:

最后，给大家呢演示一个实例demo：

原始图片为一个黑色正方形，我们希望它根据左上角的顶点进行旋转：

图片：

How to implement rotation with a point as a fixed point in css

源码：

nbsp;html>

	
		<meta>
		<title></title>
		<style>
			img{
				margin-top: 200px;
				margin-left: 500px;
				width: 100px;
				height: 100px;
				display: block;
   				 animation: rotate 6s linear infinite;
   				 transform-origin:0 0;
			}
			@keyframes rotate{
				0%{
					transform: rotate(0deg);
					
				}
				100%{
					transform: rotate(360deg);
				}
			}
		</style>
	
	
		
		<img  alt="How to implement rotation with a point as a fixed point in css" >

Copy after login

效果展示：

How to implement rotation with a point as a fixed point in css

你自行复制代码吧。。。！！！

推荐学习：《css视频教程》

Value	Description
x-axis	Define where the view is placed on the X-axis. Possible values: left center right length ## %
	Defines where on the Y-axis the view is placed. Possible values: top center bottom length ## %
	length

Value

Description

x-axis

Define where the view is placed on the X-axis. Possible values:

left
center
right
length
## %

Defines where on the Y-axis the view is placed. Possible values:

center
bottom
length

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!