12

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

4

2 に答える 2

14

疑似要素の背景を設定することができます。

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

デモ

于 2013-06-05T21:08:33.453 に答える