Article directory
1. Use transfrom-origin to set the rotation center point
Set the style for the div box model transform: rotateto make the box model rotate around the center point , the code is as follows:
/* 顺时针旋转 45 度 */
transform: rotate(45deg);
/* 设置过渡动画 */
transition: all 1s;
The box model, in addition to rotating around the center point, can also be set to rotate around a certain point , such as: rotate around the lower left corner;
Using the transfrom-origin style, you can set the rotation center point of the box model;
transfrom-origin style syntax:
transfrom-origin: x y;
Between the xy coordinates, use spaces to separate;
The default value of the xy coordinate is the center point, which is ( 50% , 50% );
The value of xy coordinates, the types that can be set are as follows:
- Percentage: 50%
- Pixels: 10px
- Positional nouns: can be top / bottom / left / right / center;
After setting, transform: rotatewhen the style is used again, it will rotate around the xy coordinates specified above;
2. Code example - use transfrom-origin to set the center of rotation
1. Code example - use localizer to set the rotation center point
Use the localizer to set the rotation center point, and set the lower left corner as the rotation center point;
Set the lower left corner as the rotation center point;
/* 设置旋转中心点 */
transform-origin: left bottom;
Code example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3 2D 转换 - rotate 旋转</title>
<style>
div {
width: 200px;
height: 200px;
/* 上下 100 像素外边距, 居中对齐 */
margin: 100px auto;
background-color: pink;
/* 设置过渡动画 */
transition: all 1s;
/* 设置旋转中心点 */
transform-origin: left bottom;
}
div:hover {
/* 鼠标移动上去后 三角形超右 */
transform: rotate(-45deg);
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
Results of the :
The effect after the mouse moves up: rotate 45 degrees counterclockwise around the lower left corner;
2. Code example - set the rotation center point using a percentage
Use the localizer to set the rotation center point, set 25% 25% as the rotation center point;
Set 25% 25% position as the rotation center point;
/* 设置旋转中心点 */
transform-origin: 25% 25%;
Code example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3 2D 转换 - rotate 旋转</title>
<style>
div {
width: 200px;
height: 200px;
/* 上下 100 像素外边距, 居中对齐 */
margin: 100px auto;
background-color: pink;
/* 设置过渡动画 */
transition: all 1s;
/* 设置旋转中心点 */
transform-origin: 25% 25%;
}
div:hover {
/* 鼠标移动上去后 三角形超右 */
transform: rotate(-45deg);
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
Results of the :
The effect after the mouse moves up: rotate 45 degrees counterclockwise around the 25% 25% position;
3. Code example - use pixel value to set the rotation center point
Use the localizer to set the rotation center point, set the 0px 0px position as the rotation center point;
Set the 0px 0px position as the rotation center point;
/* 设置旋转中心点 */
transform-origin: 0px 0px;
Code example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3 2D 转换 - rotate 旋转</title>
<style>
div {
width: 200px;
height: 200px;
/* 上下 100 像素外边距, 居中对齐 */
margin: 100px auto;
background-color: pink;
/* 设置过渡动画 */
transition: all 1s;
/* 设置旋转中心点 */
transform-origin: 0px 0px;
}
div:hover {
/* 鼠标移动上去后 三角形超右 */
transform: rotate(-45deg);
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
Results of the :
The effect after the mouse moves up: rotate 45 degrees counterclockwise around the position of 0px 0px;
