ホバーで傾く 3D シャドウカード
このスニペットは、マウスを乗せるとカードがわずかに 3D で傾き、影が深くなって浮き上がる演出です。親に perspective を与えて奥行きを作り、カード側は :hover で rotateX と rotateY 、それに scale を組み合わせて立体的に持ち上げます。
解説
このスニペットは、マウスを乗せるとカードがわずかに 3D で傾き、影が深くなって浮き上がる演出です。親に perspective を与えて奥行きを作り、カード側は :hover で rotateX と rotateY、それに scale を組み合わせて立体的に持ち上げます。同時に box-shadow を大きくして、本当に手前に飛び出したような印象を作ります。動きは transition と cubic-bezier のイージングで滑らかにしてあり、JavaScript は使いません。
使いどころ
- サービスや実績を紹介するカードに、触れる楽しさを足したいとき
- 料金プランや特徴ブロックで、ホバー時の反応を上品に見せたいとき
- ポートフォリオのサムネイルカード
傾きの強さは rotateX と rotateY の角度で、浮き上がりは scale と影の大きさで調整します。角度を大きくしすぎると安っぽくなるので、控えめが上品です。注意点として、傾きはカード全体で一律です。マウス位置に追従して傾けたい場合は JavaScript の追加が必要になります。タッチ端末ではホバーが効かないため、モバイルでは別の見せ方も用意しておくと安心です。
使用例・適したシーン
- サービス紹介セクション
- メンバー紹介・スタッフ一覧
- 料金プラン比較
- 実績・事例カード
よくある質問
傾く角度を変えたいときは
hover 時の rotateX と rotateY の角度の値を編集してください。数値を小さくすると控えめに、大きくすると大胆に傾きます。あわせて scale で浮き上がりの強さも調整できます。
マウスの位置に合わせて傾けられますか
このスニペットは CSS のみで、傾きはカード全体で一律です。マウス位置に追従させたい場合は、座標を読み取って角度を計算する短い JavaScript を追加する必要があります。