~~~
<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>
~~~
提供圖片如下：
效果圖如下：
