css平面转动动画 |css 鼠标点击后

.plane {
width: 100px;
height: 100px;
background: #26AFEB;
animation: rotate 2s infinite linear;
transform-origin: center center;
}
@keyframes rotate {
0% {
transform: rotateY(0deg);
}
100% {
transform: rotateY(360deg);
}
}

在上述代码中，大家定义了一个类名为plane的元素，设置了它的宽高和背景颜色。通过animation属性，大家创建了一个名为rotate的动画，使它无限次旋转。

在keyframes中，大家定义了动画的关键帧。通过设置0%和100%分别表示动画起点和终点，同时通过transform属性设置了元素的旋转度数。

另外，大家还设置了transform-origin属性，它可以指定旋转元素的中心点。在本例中，大家将元素的中心点设置在了正中心。

上述代码仅是一个简单的旋转动画示例，如果你想要实现更复杂的翻转、翘起等效果，可以尝试使用其它transform变换属性和关键帧组合实现。