• 操作
  • エリアホバー

#area hover 019

ホバー時に画像の角度が変わる

参考サイトURL
動きの解説

画像が傾いたり回転したりする動きは、静的なレイアウトに不安定な面白さや、写真を手で持ったようなアナログ感を加えます。グリッドで整然と並べられたギャラリーの中で、ホバーした写真だけが少し傾く演出は、規律の中の遊び心として効果的です。transform: rotateによる単純な回転ですが、回転の中心点(transform-origin)を画像の四隅や中心からずらすことで、ピン留めされた写真が揺れるような、より情緒的な動きを作ることができます。隣接要素への被りに注意が必要です。