変身4■複数の画像並べて3変身    UP日時 : 2021/10/02

注意:ブラウザIEだけ左右反転時の動作が他のブラウザとは違います。
●2021/10/02:即時関数で囲んで、グローバル変数を消しました。

■並んだフグがランダムで変身するJavaScriptはこちら→ 変身1■膨らむフグ-基本(後ろにサメ)

上記のJavaScriptを改造しました。
ランダムに並んだ複数画像がランダムに3種類の変化をします。
見本では3種類の画像をランダムに8枚並べました。
画像種類は増減可能です。並べる枚数も増減可能です。

その画像を並べ、CSSアニメの指定を使って「サイズ変化」と「左右回転」と「左右反転」の3種類でランダム変化させています。

CSSアニメの回転作成方法は意外と知られていないCSSの色々な回転アニメーションの作成方法から。
CSSアニメの総合的な記述方法は【CSS】animation・keyframesを徹底解説から。
CSSの左右反転については【CSS】transform: scale()で要素を上下・左右に反転させる方法から。

■並んだ複数の画像がランダムに変身するJavaScript関連コーナーはこちら→ その他・変身・メニュー