2

HTML

<div class="photos"> 
<img src="images/p1.jpg" />
<img src="images/p2.jpg" />
.............
</div>

CSS

.photos img:hover {
    -webkit-transform: rotate(360deg) scale(1.5);
    -moz-transform: rotate(360deg) scale(1.5);
    -o-transform: rotate(360deg) scale(1.5);
    transform: rotate(360deg) scale(1.5);
    z-index: 10;}

为什么上述 CSS 旋转属性仅适用于p1.jpg？

4

4 回答 4

1

旋转作品。360 度的角度使图像处于同一位置。使用带有过渡的变换或更改角度值。

因此，您的代码将类似于：

.photos img {
    -webkit-transition: -webkit-transform 1.2s linear;
    -moz-transition: -moz-transform 1.2s linear;
    -o-transition: -o-transform 1.2s linear;
    -ms-transition: -ms-transform 1.2s linear;
    transition: transform 1.2s linear;
    overflow:hidden;
}

.photos img:hover { 
    -webkit-transform: rotate(360deg) scale(1.5);
    -moz-transform: rotate(360deg) scale(1.5);
    -o-transform: rotate(360deg) scale(1.5);
    -ms-transform: rotate(360deg) scale(1.5);
    transform: rotate(360deg) scale(1.5);
    z-index: 10;
}
于 2013-08-19T09:27:03.257 回答
1

因为您只悬停在p1.jpgCSS 选择器上，所以只会在您悬停的图像上触发。

如果您不希望每个图像单独旋转，请将这些行添加到您的 css。

-webkit-transition: all 1.2s linear;
-moz-transition: all 1.2s linear;
-o-transition: all 1.2s linear;
-ms-transition: all 1.2s linear;
transition: all 1.2s linear;

不幸的是，您所要求的将需要一些 JavaScript 才能实现。

于 2013-08-19T09:17:12.017 回答
0

这个链接可以帮助你..

    .elem{
    -webkit-transition-property: -webkit-transform;
    -webkit-transition-duration: 1s;

    -moz-transition-property: -moz-transform;
    -moz-transition-duration: 1s;
}
.elem:hover {
    -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);}
}
于 2013-08-19T09:24:15.803 回答
0

您的代码没有问题。旋转正在处理 div 的所有元素。您看不到它的唯一原因是因为您没有delay or duration“转换”。

我使用了与“Dragos Sandu”相同的代码。我建议的唯一改变是持续时间的“缓入”。特别是当变化只有 1.2 秒时。这使更改“容易上手”。

CSS

.photos img:hover {
    transform: rotate(360deg) scale(1.5);
    -webkit-transform: rotate(360deg) scale(1.5);
    -moz-transform: rotate(360deg) scale(1.5);
    -o-transform: rotate(360deg) scale(1.5);
    z-index: 10;
    -webkit-transition: all 1.2s ease-in-out;
    -moz-transition: all 1.2s ease-in-out;
    -o-transition: all 1.2s ease-in-out;
    -ms-transition: all 1.2s ease-in-out;
}

工作演示

于 2013-08-19T09:49:55.627 回答