前言
最近在写前端的时候，有这么一个需求就是前端页面都是静态的，看上去比较呆，要求加上一点动态效果。。于是乎做了一个首页旋转的效果
实现
这个地方我就直接放源码的实现了，其实主要就是设置一下他 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="/ae7f7ec9-8720-56a3-b2c6-5b6c5aa7434d?imageView2/2/w/540/format/jpg"></body></html>
实现效果的话，可以在桌面创建一个 html 文件，把源码复制进去直接打开，查看效果，这个地方就不再单独放上去了
