Home > Article > Web Front-end > How to set the rotation reference point for css3 animation
How to set the rotation reference point for css3 animation
- WBOYOriginal
- 2022-06-14 15:56:301502browse
In CSS3, you can use the "transform-origin" attribute to set the rotation reference point of the element. This attribute is used to change the position of the element's rotation. If it is a 2D rotation element, you can change the position of the element on the x and y axes. , if it is a 3D rotating element, you can change the position of the element on the x-axis, y-axis and z-axis. The syntax is "transform-origin:X-axis direction position Y-axis direction position Z-axis direction position;".
The operating environment of this tutorial: Windows 10 system, CSS3&&HTML5 version, Dell G3 computer.
How to set the rotation reference point for css3 animation
Set the rotation reference point with the transform-Origin attribute
The transform-Origin attribute allows you to change the transformation element Location.
2D transform elements can change the X and Y axes of the element. Transform elements in 3D and also change the Z-axis of the element.
To use this attribute, you must first use the transform attribute.
The syntax is:
transform-origin: x-axis y-axis z-axis;
x-axis
Defines where the view is placed on the X-axis.
y-axis
Defines where on the Y-axis the view is placed.
z-axis
Defines where on the Z-axis the view is placed.
Examples are as follows:
<style>
#div1
{
position: relative;
height: 200px;
width: 200px;
margin: 100px;
padding:10px;
border: 1px solid black;
}
#div2
{
padding:50px;
position: absolute;
border: 1px solid black;
background-color: red;
transform: rotate(45deg);
transform-origin:50% 50%;
-ms-transform: rotate(45deg); /* IE 9 */
-ms-transform-origin:50% 50%; /* IE 9 */
-webkit-transform: rotate(45deg); /* Safari and Chrome */
-webkit-transform-origin:50% 50%; /* Safari and Chrome */
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">HELLO</div>
</div>
</body>Output results:
(Learning video sharing: css video tutorial,html video tutorial)
The above is the detailed content of How to set the rotation reference point for css3 animation. For more information, please follow other related articles on the PHP Chinese website!