## 通过使用动画、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>
~~~
