css 背景图翻转,CSS3 / CSS – 旋转背景图片

你可以这样设置一个伪元素的背景,比如后面的

.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;}

}