如何使用 CSS 随机旋转图像？

Question

我的网页上有一个包含 20 张图片的图库，我希望在将鼠标悬停在每张图片上时随机旋转（-5 到 5 度）。如果可能的话，我想只使用 CSS。如果没有，我愿意使用 JavaScript 或 jQuery。

我的 CSS 如下：

.photo:hover {
    z-index:1;
    transform:rotate(6deg) scale(1.25);
    -webkit-transform:rotate(6deg) scale(1.25);
    -moz-transform:rotate(6deg) scale(1.25);
    -ms-transform:rotate(6deg) scale(1.25);
}

6deg 应该是一个随机数，因此每次用户将鼠标悬停在图像上时，它都会在 -5 和 5 之间随机旋转。我可以从 CSS 中调用 JavaScript 函数，甚至是 JavaScript 变量吗？这比创建 20 个不同的 CSS id 要好。

我怎样才能做到这一点？谢谢！

Answer 1

您不需要单独的 CSS ID，但您可以在类上使用一些 jQuery。此处直接使用.each() 而不是.css()，否则将生成一次随机角度并用于所有图像。悬停时单独旋转：

$('.photo').hover(function() {
    var a = Math.random() * 10 - 5;
    $(this).css('transform', 'rotate(' + a + 'deg) scale(1.25)');
}, function() {
    $(this).css('transform', 'none');
});

如果您想平滑地为这些转换设置动画，您可以简单地在类中添加一个transform CSS 属性：

.photo {
    transition: transform 0.25s linear;
}

演示：http://jsbin.com/iqoreg/1/edit

Answer 2

我知道这是旧的，但我在 2022 年通过 Google 找到了这个，并且有一种伪随机方式可以使用纯 CSS 实现类似的效果。

确实需要调整正负值的旋转和顺序以匹配您的设计宽度，否则会产生非常明显的重复图案。

尝试一下并使用这些值，直到找到与您的设计相匹配的东西。

/* setup */
section {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
div {
  width: 100px;
  height: 100px;
  background: #E54575;
}
/* maaagic */
div { transform:rotate(5deg); }
div:nth-child(2n) { transform:rotate(-4deg); }
div:nth-child(3n) { transform:rotate(2deg); }
div:nth-child(4n) { transform:rotate(-5deg); }
div:nth-child(5n) { transform:rotate(-6deg); }
div:nth-child(6n) { transform:rotate(6deg); }
/* ... you can add or remove more rotations here... */

<section>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>