基本上我正在寻找的是能够使图像旋转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);
}
这段代码很好用,我需要知道的是如何让它变成一个不同的图像。
答案 0 :(得分:1)
可以通过添加一些JavaScript来完成...另外 - 旋转2个div而不是img。在每个div中放置一个图像,在另一个div上放置。旋转时,将重叠的div(更改不透明度)淡化为100%。这将为您提供将一个图像淡入下一个图像的效果。
答案 1 :(得分:1)
如果您可以将<div>
与背景图片而非实际<img>
一起使用,则可以轻松地使用css。
<强> Working Example 强>
.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);
}