CSS 旋转属性不会应用于所有图库图像

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 rotate属性只应用于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

此链接可以帮助您。。

    .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

您的代码没有问题。rotate正在处理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;
}

工作演示