前言
最近在写前端的时候，有这么一个需求就是前端页面都是静态的，看上去比较呆，要求加上一点动态效果。。于是乎做了一个首页旋转的效果
实现
这个地方我就直接放源码的实现了，其实主要就是设置一下他 X Y 轴的旋转，以及旋转速度
## 旋转属性
animation: rotationY 10s infinite linear;
transform: rotate(360deg);
@keyframes rotationY {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(360deg);
}
}
上边这是比较关键的一部分源码，大概的意思就是，设置了一下旋转速度和旋转方向，这个是顺时针的哈
完整代码如下
<html>
<head>
<meta charset='utf8' />
<style type='text/css'>
* {
margin: 0;
padding: 0;
}
body {
background: lightseagreen;
}
.btn {
animation: rotationY 10s infinite linear;
transform: rotate(360deg);
}
@keyframes rotationY {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(360deg);
}
}
</style>
</head>
<body>
<img class="btn" src="https://ci.xiaohongshu.com/ae7f7ec9-8720-56a3-b2c6-5b6c5aa7434d?imageView2/2/w/540/format/jpg">
</body>
</html>
实现效果的话，可以在桌面创建一个 html 文件，把源码复制进去直接打开，查看效果，这个地方就不再单独放上去了