是否可以在css中旋转背景图像？
我可以旋转一个元素使用：
@-webkit-keyframes spinX
{
0% {-webkit-transform: rotateX(0deg); -webkit-transform-origin: 0% 50% 0;}
100% {-webkit-transform: rotateX(360deg); -webkit-transform-origin: 0% 50% 0;}
}
@-webkit-keyframes spinY
{
0% {-webkit-transform: rotateY(0deg); -webkit-transform-origin: 0% 0% 5;}
100% {-webkit-transform: rotateY(360deg); -webkit-transform-origin: 0% 0% 5;}
}
但是如果我想旋转一个元素的背景图像呢？
找不到任何东西,我可以使用gif,但我想使它在css如果可能的话！
任何想法？
谢谢
我忘了说是否可以支持动画跨浏览器：P
解决方法
你可以这样设置一个伪元素的背景,比如后面的
.main {
width: 200px;
height: 300px;
position: relative;
border: solid 1px gray;
}
.main:after {
width: 100%;
height: 100%;
position: absolute;
background: url("http://placekitten.com/800/1200");
background-size: cover;
content: '';
-webkit-animation: spinX 3s infinite;
animation: spinX 3s infinite;
}
@-webkit-keyframes spinX
{
0% {-webkit-transform: rotateX(0deg); -webkit-transform-origin: 0% 50% 0;}
100% {-webkit-transform: rotateX(360deg); -webkit-transform-origin: 0% 50% 0;}
}
@keyframes spinX
{
0% {transform: rotateX(0deg); transform-origin: 0% 50% 0;}
100% {transform: rotateX(360deg); transform-origin: 0% 50% 0;}
}
<div class="main"></div>
