css - 我想同时淡入和旋转

Question

我正在使用 ccs3 在悬停时淡入图像。我想要在悬停时淡入的相同图像旋转。我好像漏掉了什么。

这是一个 jsfiddle。 http://jsfiddle.net/5ftZ7/

<div id="cf">
<img class="bottom" alt="" src="http://s513195336.onlinehome.us/wp-content/uploads/2014/02/pin-over.png" /> <img class="top" alt="" src="http://s513195336.onlinehome.us/wp-content/uploads/2014/02/pin.png" />
</div>

#cf {
    position:relative;
    margin:30px auto;
    width:200px;
    height:200px;
    }

#cf img {
    margin-top:30px;
    position:absolute;
    left:0;
    top:0;
    -webkit-transition: opacity .2s ease-in-out;
    -moz-transition: opacity .2s ease-in-out;
    -o-transition: opacity .2s ease-in-out;
    transition: opacity .2s ease-in-out;
    -webkit-transition: -webkit-transform 0.2s ease-in;
    }

#cf img.top:hover {
    opacity:0;
    position:absolute;
    left:0;
    top:0;
    -ms-transform: rotate(30deg); /* IE 9 */
    -webkit-transform: rotate(30deg); /* Chrome, Safari, Opera */
    transform: rotate(30deg);
    }

Answer 1

有多种问题最终导致无法按您希望的方式工作:

过渡规则的理解

CSS 属性不能累积。 transition 规则没有什么特别之处:

transition: opacity .2s ease-in-out;
transition: transform .2s ease-in-out;

第二个声明覆盖第一个。这与:

color: red;
color: blue;

是蓝色的。您可以使用多个逗号分隔的转换定义，或使用特殊的 all 属性:

transition-property: opacity, transform;
transition-duration: .2s;
transition-timing-function: ease-in-out;
/* or */
transition: opacity .2s ease-in-out, transform .2s ease-in-out;
/* or, but this may affect properties you do not want */
transition: all .2s ease-in-out

:hover 带有堆叠元素。

.top 在 .bottom 之上，所以 .bottom 即使 .top 也不能悬停是透明的。这可以防止应用您想要应用于 .bottom 的规则。最简单的解决方案是在 #cf 上检查 :hover，就像在 #cf:hover img.top 作为选择器一样.

.bottom 中缺少

transform

.bottom 在悬停时也需要转换规则，以便它可以与 .top 同步旋转。

这是一个仅使用 -webkit 并增加过渡持续时间以达到效果的工作示例。

http://jsfiddle.net/ExplosionPIlls/5ftZ7/1/