6

Webページに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の異なるCSSIDを作成するよりも優れています。

どうすればこれを達成できますか？ありがとう！

4

2 に答える 2

12

個別のCSSIDは必要ありませんが、クラスでjQueryを使用できます。.each()ここでは直接ではなくが使用され.css()ます。そうしないと、ランダムな角度が1回生成され、すべての画像に使用されるためです。ホバー時に個別に回転するには：

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

これらの変換をスムーズにアニメーション化する場合は、transformCSSプロパティをクラスに追加するだけです。

.photo {
    transition: transform 0.25s linear;
}

デモンストレーション： http： //jsbin.com/iqoreg/1/edit

于 2012-11-22T01:44:41.387 に答える
0

私はこれが古いことを知っていますが、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>

于 2022-01-02T07:18:27.987 に答える