CSS 旋转属性不适用于所有图库图片答案

【问题标题】：CSS rotate property won't apply to all gallery imagesCSS 旋转属性不适用于所有图库图片
【发布时间】：2013-08-20 00:21:21
【问题描述】：

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 ？

【问题讨论】：

您知道这仅适用于您悬停的图像吗？
是的，当我悬停 p1 时它可以工作，当我悬停任何其余部分时，它们只会缩放而不是旋转..

标签： html css

【解决方案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 才能实现。

【讨论】：

好吧，我的意思是当我悬停 p2 时，它不会旋转，其余部分相同，只有 p1 在悬停时旋转。
尝试从 img 标记中删除尾部斜杠。您无需使用/> 关闭它们，只需> 即可。这是一个很长的镜头，但可能就是这样。

【解决方案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;
}

【讨论】：

【解决方案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);}
}

【讨论】：

我想我知道问题出在哪里了，除了 p1 之外的所有其他图像都已经旋转了一定程度。

【解决方案4】：

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

我使用了与“Dragos Sandu”相同的代码。我建议的唯一更改是持续时间的“ease-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

【讨论】：