Home  >  Article  >  Web Front-end  >  How to implement rotation with a point as a fixed point in css

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

藏色散人
藏色散人Original
2023-01-31 11:12:162879browse

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

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

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;
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" >
		
	

 效果展示:

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

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn