【CSS3】CSS3 2D 转换 - rotate 旋转 ③ ( 使用 transfrom-origin 设置旋转中心点 | 使用 方位词 / 百分比值 / 像素值 设置旋转中心点 )
/* 设置元素的基本样式 */
.box {
width: 100px;
height: 100px;
background-color: #4CAF50;
margin: 20px;
/* 设置 3D 空间的视图 */
perspective: 400px;
}
/* 定义动画 */
@keyframes spin {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(360deg);
}
}
/* 应用动画 */
.box:hover {
/* 设置旋转中心为元素右上角 */
transform-origin: top right;
/* 触发动画 */
animation: spin 2s linear infinite;
}这段代码定义了一个名为 .box 的类，它在鼠标悬停时会以右上角为旋转中心旋转。动画效果通过 @keyframes 规则定义，当鼠标悬停在元素上时，会触发名为 spin 的无限循环动画。通过设置 perspective 属性，我们为 3D 空间创建了一个视图，使得旋转效果看起来更加立体和引人入胜。
评论已关闭