CSS3设置rotate旋转点
在CSS3中，可以使用 transform-origin 属性来设置元素的旋转点（即旋转的中心点）。默认情况下，元素的旋转点是其中心点（50% 50%），但可以通过 transform-origin 将其设置为任意位置。
transform-origin的基本用法
transform-origin 属性接受两个值，分别表示旋转点的水平位置和垂直位置。值可以是百分比、长度单位（如 px、em）或关键字（如 left、right、top、bottom）。
语法：
transform-origin: x-axis y-axis;
示例：
.box {
width: 100px;
height: 100px;
background-color: #4CAF50;
transform: rotate(45deg); /* 旋转45度 */
transform-origin: top left; /* 旋转点为左上角 */
}
说明：
transform-origin: top left;将旋转点设置为元素的左上角。- 旋转点可以是元素的任意位置。
- 使用百分比设置旋转点
百分比值相对于元素的宽度和高度。
示例：
.box {
width: 100px;
height: 100px;
background-color: #4CAF50;
transform: rotate(45deg);
transform-origin: 25% 75%; /* 旋转点为水平25%、垂直75%的位置 */
}
说明：
transform-origin: 25% 75%;表示旋转点位于元素水平方向的25%和垂直方向的75%处。
- 使用长度单位设置旋转点
可以使用 px、em 等长度单位精确设置旋转点的位置。
示例：
.box {
width: 100px;
height: 100px;
background-color: #4CAF50;
transform: rotate(45deg);
transform-origin: 20px 80px; /* 旋转点为距离左边20px、距离顶部80px的位置 */
}
说明：
transform-origin: 20px 80px;表示旋转点位于距离左边20px、距离顶部80px的位置。
- 使用关键字设置旋转点
可以使用关键字（如 left、right、top、bottom、center）快速设置旋转点。
示例：
.box {
width: 100px;
height: 100px;
background-color: #4CAF50;
transform: rotate(45deg);
transform-origin: right bottom; /* 旋转点为右下角 */
}
说明：
transform-origin: right bottom;将旋转点设置为元素的右下角。
- 3D旋转的旋转点
对于3D旋转（如 rotateX()、rotateY()、rotateZ()），transform-origin 还可以设置Z轴的值。
语法：
transform-origin: x-axis y-axis z-axis;
示例：
.box {
width: 100px;
height: 100px;
background-color: #4CAF50;
transform: rotateX(45deg); /* 绕X轴旋转45度 */
transform-origin: center center 50px; /* 旋转点为元素中心，Z轴偏移50px */
}
说明：
transform-origin: center center 50px;表示旋转点位于元素中心，并在Z轴上偏移50px。
- 动态调整旋转点
可以通过JavaScript动态调整旋转点。
HTML结构：
<div class="box"></div>
<button onclick="changeOrigin()">改变旋转点</button>
CSS样式：
.box {
width: 100px;
height: 100px;
background-color: #4CAF50;
transform: rotate(45deg);
transform-origin: top left;
transition: transform-origin 0.3s ease; /* 添加过渡效果 */
}
JavaScript代码：
function changeOrigin() {
const box = document.querySelector('.box');
box.style.transformOrigin = 'right bottom'; // 动态改变旋转点
}
说明：
- 点击按钮后，旋转点会从左上角变为右下角。
- 结合动画使用
可以将 transform-origin 与CSS动画结合，实现复杂的旋转效果。
示例：
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.box {
width: 100px;
height: 100px;
background-color: #4CAF50;
transform-origin: top left; /* 旋转点为左上角 */
animation: rotate 2s linear infinite; /* 无限旋转 */
}
说明：
- 旋转点设置为左上角，元素会围绕左上角旋转。
总结
transform-origin用于设置元素的旋转点。- 可以使用百分比、长度单位或关键字指定旋转点。
- 对于3D旋转，还可以设置Z轴的值。
- 结合JavaScript或动画，可以实现动态的旋转效果。
通过灵活使用 transform-origin，可以创建出更丰富的视觉效果！
更多vue相关插件及后台管理模板可访问vue admin reference，代码详情请访问github
