css3前端开发，动态特效transform案例1-沿X轴倾斜和旋转
/* 基础样式 */
.box {
width: 100px;
height: 100px;
background-color: #333;
margin: 50px;
/* 设置动画名称和持续时间 */
animation: rotateAndSkew 5s infinite alternate linear;
}
/* 关键帧定义 */
@keyframes rotateAndSkew {
from {
/* 初始状态：没有旋转和倾斜 */
transform: rotate(0deg) skewX(0deg);
}
to {
/* 结束状态：绕X轴旋转45度并且沿X轴倾斜20度 */
transform: rotate(45deg) skewX(20deg);
}
}这段代码定义了一个名为.box的类，它将应用动画效果。动画名称为rotateAndSkew，通过变形（transform）属性实现沿X轴的倾斜（skewX）和绕X轴的旋转（rotate）。动画从初始状态开始，经过5秒，到达结束状态，并且是无限循环，每次循环的状态都会交替出现（alternate），动画的速度变化是线性的（linear）。
评论已关闭