Question

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 ？

Answer 1

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

如果你不想将每个图像分开旋转，请将这些行添加到你的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来实现。

Answer 2

旋转工作。 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;
}

Answer 3

this link可以帮助你..

    .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);}
}

Answer 4

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

我使用了'Dragos Sandu'使用的相同代码。只有改变我建议的持续时间是“ easy-in-out ”。特别是当变化只有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;
}

Working Demo

CSS rotate属性不适用于所有图库图像

4 个答案: