Css 在图像悬停时是否更改为另一图像？

基本上，我所寻找的是能够使一个图像做360度旋转，并放大图像，我已经有了这两个下来

我现在需要做的是，找出如何使它真正旋转360度并放大到不同的图像，以下是我的css：

.rotate img {
    -moz-transition: all 0.6s ease-in-out;
    -webkit-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
    -ms-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;
}
.rotate img:hover {
    cursor: crosshair
    -moz-transform: rotate(360deg) scale(1.25);
    -webkit-transform: rotate(360deg) scale(1.25);
    -o-transform: rotate(360deg) scale(1.25);
    -ms-transform: rotate(360deg) scale(1.25);
    transform: rotate(360deg) scale(1.25);
}

---

这段代码运行得很好，我只需要知道如何将其转换为不同的图像。

这可以通过添加一些JavaScript来完成。。。同时-旋转2个div，而不是img。在每个div中放置一个图像，覆盖另一个。旋转时，将重叠的div淡入淡出（更改不透明度）为100%。这将给你一个图像淡入下一个图像的效果。

如果你可以将

与背景图像而不是实际的

一起使用，你可以很容易地使用css

.rotate {
    background: url("http://lorempixel.com/output/abstract-q-c-100-100-7.jpg") no-repeat;
    height: 100px;
    width:100px;
    -moz-transition: all 0.6s ease-in-out;
    -webkit-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
    -ms-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;
}
.rotate:hover {
    background: url("http://lorempixel.com/output/abstract-q-c-100-100-8.jpg") no-repeat;
    cursor: crosshair;
    -moz-transform: rotate(360deg) scale(1.25);
    -webkit-transform: rotate(360deg) scale(1.25);
    -o-transform: rotate(360deg) scale(1.25);
    -ms-transform: rotate(360deg) scale(1.25);
    transform: rotate(360deg) scale(1.25);
}

---

CSS是不可能的，但是Javascript可以通过替换图像源来完成。哇，非常感谢。一切都很完美。谢谢你的密码。