CSS3搞定图片变形再旋转

发现最近和图片样式杠上了。 

需要图片可以在根据X轴变形之后仍然能够顺时针或者逆时针旋转。达到如下效果：

dom结构： 

<div class="imgWrap">
    <img src="test.png">
</div>

首先，实现对图片的旋转：

@keyframes imgRotate{
    0%{
        transform:rotate(0deg);
    }
    100%{
        transform:rotate(360deg);
    }
}
img{
    animation: imgRotate 5s infinite linear;;
}

改变 imgRotate 从 0% 的 360° 到 100% 的 0° 就实现了逆时针旋转，animation 控制的旋转动画的其他参数可以自行查询。

之后，在实现对图片的变形

.imgWrap{
    transform: rotateX(60deg);
}

这里犯过一个错误，仍然对img设置transform属性，但是按照x轴变形的效果不会生效，这是因为有了两个transform作用于一个标签。这时就可以将变形效果加在图片的父容器上面。

如果，将旋转动画加在父容器上面，变形样式放在img上面，则会出现下面的效果：