CSS动画是一种用于创建动画效果的Web技术,可以让文本、图像、形状等元素在浏览器中沿着指定的方向和速度旋转、缩放、翻转等。通过将需要动画效果的元素添加到网页中,然后使用CSS3的动画属性和过渡效果,可以轻松创建漂亮的动画效果。
在CSS动画中,旋转效果是一种常见的动画效果,可以使用CSS的`transform`属性来实现。该属性可以设置元素的旋转角度、旋转速度等参数,从而使元素沿指定方向旋转。
下面是一个基本的CSS旋转示例,它将一个元素沿垂直方向旋转90度:
div {
width: 200px;
height: 200px;
background-color: blue;
transform: rotateY(90deg);
在这个示例中,`div`元素被设置为宽度为200px、高度为200px,背景颜色为蓝色,并使用`transform`属性将其旋转90度。
如果要创建一个不停旋转的效果,可以使用CSS的`animation`属性,该属性可以定义一个循环,并在循环中执行一系列动画操作。在`animation`属性中,可以使用多个`animation-name`属性来定义不同的动画,每个动画都包含一个或多个`animation-duration`、`animation-timing-function`、`animation-iteration-count`等参数。
下面是一个基本的CSS旋转和不停旋转的示例:
@keyframes rotateY {
0% {
transform: rotateY(0deg);
100% {
transform: rotateY(360deg);
div {
width: 200px;
height: 200px;
background-color: blue;
animation: rotateY 1s infinite;
在这个示例中,`div`元素被设置为宽度为200px、高度为200px,背景颜色为蓝色,并使用`animation`属性将其旋转360度,并在每次循环结束时停止动画。
通过使用CSS动画,可以创建出各种不同类型的动画效果,使网页更加生动有趣。