~~~
<style>
.parent{
width: 200px;
border: 1px solid #ccc;
padding: 10px;
perspective: 500px;/* 透视值越大 效果越正常 */
}
img{
width: 200px;
animation: rotate 2s infinite;
}
@keyframes rotate{
from{
transform: rotateY(0deg)
}
to{
transform: rotateY(180deg)
}
}
</style>
~~~
> rotateX--水平旋转
> rotateY--垂直旋转
> rotateZ--中心点旋转
~~~
<body>
<div class="parent">
<img src="images/policy.png" alt="">
</div>
</body>
~~~
提供图片如下：
效果图如下：
