1. 需求
发现最近和图片样式杠上了。
需要图片可以在根据X轴变形之后仍然能够顺时针或者逆时针旋转。达到如下效果
步入主题,其实上面就是一个图片旋转底图,然后用的第三方图表工具(highcharts)做的3D饼状图。下面记录下这个圆盘旋转实现步骤,其实很简单,当初想复杂了,还用了什么倾斜 scale
去实现其实用不到。
2. 实现代码
2.1 html 结构
<div class="imgWrap">
<img src="test.png">
</div>
2.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);
}
3. 开发遇到的坑点
这里犯过一个错误,仍然对img设置transform属性,但是按照x轴变形的效果不会生效,这是因为有了两个transform作用于一个标签。这时就可以将变形效果加在图片的父容器上面。
如果,将旋转动画加在父容器上面,变形样式放在img上面,则会出现下面的效果