## 通過使用動畫、perspective屬性做的3d特效
一個沿著y軸不斷旋轉的照片

~~~
<style>
.parent{
width: 200px;
border: 1px solid #333;
padding: 10px;
perspective :20000px;
/*perspective 屬性定義 3D 元素距視圖的距離,以像素計。該屬性允許您改變 3D 元素查看 3D 元素的視圖。
當為元素定義 perspective 屬性時,其子元素會獲得透視效果,而不是元素本身
注釋:perspective 屬性只影響 3D 轉換元素。*/
background: #ff2d51;
}
img{
width: 200px;
animation: rotate 3s infinite;
}
@keyframes rotate{
form{
transform: rotateY(0deg);/*繞Y軸旋轉 */
/*transform: rotateZ(0deg);z軸旋轉就是以中心點進行旋轉*/
}
to{
transform: rotateY(360deg);
/*transform: rotateZ(360deg);*/
}
}
</style>
<div class="parent">
<img src="images/item01.jpg" alt="">/*在此處可對圖片進行更換*/
</div>
~~~