发现最近和图片样式杠上了。
需要图片可以在根据X轴变形之后仍然能够顺时针或者逆时针旋转。达到如下效果：
步入主题，其实上面就是一个图片旋转底图，然后用的第三方图表工具（highcharts）做的3D饼状图。下面记录下这个圆盘旋转实现步骤，其实很简单，当初想复杂了，还用了什么倾斜 scale 去实现其实用不到。
1. html 结构
<div class="imgWrap">
<img src="test.png">
</div>
2. css 样式
首先，实现对图片的旋转：
@keyframes imgRotate{
0%{
transform:rotate(0deg);
}
100%{
transform:rotate(360deg);
}
}
img{
width: 226px;
height: 226px;
display: block;
margin: 100px auto;
animation: imgRotate 5s infinite linear;
}
改变 imgRotate 从 0% 的 360° 就实现了逆时针旋转效果，之后，在实现对图片的变形。
.imgWrap{
transform: rotateX(60deg);
}
这里犯过一个错误，仍然对img设置transform属性，但是按照x轴变形的效果不会生效，这是因为有了两个transform作用于一个标签。这时就可以将变形效果加在图片的父容器上面。
如果，将旋转动画加在父容器上面，变形样式放在img上面，则会出现下面的效果：
