背景图像上的CSS3转换

我想做一个CSS3转换：rotate（360deg）;在过渡1s; 在背景图像而不是一个单独的图像（元素）.. 这可能吗？我已经从谷歌中搜寻出来，但没有成功！我想实现是一样的东西：背景图像上的CSS3转换

#footerLogo { 
    background: url('ster.png'), 
    -moz-transition: -moz-transform 1s, 
    transition: transform 1s, 
    -o-transition: -o-transform 1s, 
    -webkit-transition: -webkit-transform 1s; 
    background-position: #outlinedtotheleft; 
} 
#footerLogo:hover { 
    background: transform: rotate(360deg); 
    -o-transform: rotate(360deg); 
    -moz-transform: rotate(360deg); 
    -webkit-transform: rotate(360deg); 
}

我希望这是可能的！我知道这是很容易可行的JS（jQuery的）有：

$('#something').hover(function(){morecodehere});

...但我想知道是否有可能只用CSS（3）

HTML：

<div id="footerLogo"> 
    <img src="carenza.png"/> 
</div>

来源

2011-09-05 Dominique

下次添加代码块时，只需将整个块缩进4以上的空格以保留缩进。使用反引号进行内联代码。 – numbers1311407

当然，你可以尝试这样的事：

HTML

<div id="planet"> 
</div>

CSS

#planet { 
    width:200px; 
    height:200px; 
    background: transparent url(http://cdn3.iconfinder.com/data/icons/nx11/Internet%20-%20Real.png) no-repeat center center; 
} 

#planet { 
    -webkit-animation-name: rotate; 
    -webkit-animation-duration:2s; 
    -webkit-animation-iteration-count:infinite; 
    -webkit-animation-timing-function:linear; 
    -moz-animation-name: rotate; 
    -moz-animation-duration:2s; 
    -moz-animation-iteration-count:infinite; 
    -moz-animation-timing-function:linear; 
} 

@-webkit-keyframes rotate { 
    from {-webkit-transform:rotate(0deg);} 
    to { -webkit-transform:rotate(360deg);} 
} 

@-moz-keyframes rotate { 
    from {-moz-transform:rotate(0deg);} 
    to { -moz-transform:rotate(360deg);} 
}

JSFiddle

来源

2011-09-05 16:02:07

，但它只需要在鼠标悬停上转换，div包含另一个IMG。想像;你有一个小星形图像（单独的，但是原始标志的一部分）和其他标志（“某个名称”）的旁边。如果我将鼠标悬停在div（两个图像之一）上，那么只有星星旋转。只有CSS3 .. 尽管如此，仍然不错的例子:-)！ – Dominique

@Dominique是否这样？ http://jsfiddle.net/andresilich/YqdJb/2/ –

是的！谢谢！ – Dominique

我不认为你可以将变换应用到背景图像本身（与div分开）。但是，您可以旋转整个div，包括使用过渡将其设置为动画效果（here's a working example。）

如果你能描述你想达到的确切效果，这可能会有帮助吗？

代码：

#footerlogo { 
    width: 200px; 
    height: 200px; 
    background-image: url(http://lorempixum.com/200/200); 
    -webkit-transition: -webkit-transform 1s; 
    -moz-transition: -moz-transform 1s; 
    transition: transform 1s; 
} 

#footerlogo:hover { 
    -webkit-transform: rotate(360deg); 
    -moz-transform: rotate(360deg); 
    transform: rotate(360deg); 
}

来源

2011-09-05 15:26:00

前缀固定的CSS声明应该永远是最后的！你希望一旦准备好就使用标准实现，而不是用特定的浏览器覆盖它可能会被破坏的东西。 – gondo

@gondo 2011年，我怀疑有人在想，遥遥领先:)我会改变顺序。几乎是 –

背景图像上的CSS3转换

回答

相关问题