JavaScriptとCSSで作る！マウスオーバーでひっくり返る3Dボタンの実装方法
今回は、JavaScriptとCSSを組み合わせて、立体ボタンがマウスオーバーでひっくり返るようなアニメーション効果を作成する方法を解説します。Webサイトに動きを加えることで、ユーザーにインタラクティブな体験を提供し、より魅力的なUI/UXを実現できます。今回のチュートリアルを通して、3D回転ボタンの仕組みを理解し、簡単に実装できるようになるでしょう。
目指す完成形
まず、今回作成するボタンは、通常の状態では「Front Side」と表示されており、マウスオーバー時に180度回転し、裏側の「Back Side」が表示される動きを実現します。このような視覚効果をJavaScriptとCSSで実装します。
HTML構造の準備
最初に、シンプルなHTML構造を用意します。今回は、1つのボタンを中央に配置して、回転する演出をつけていきます。
<!DOCTYPE html><html lang="ja"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>3D Flip Button</title> <link rel="stylesheet" href="style.css"></head><body> <div class="button-container"> <button class="flip-button">Flip Me</button> </div> <script src="script.js"></script></body></html>ポイント解説button-containerこのdivはボタンの親要素で、CSSで3Dのパース（視点の位置）を設定します。
flip-buttonボタン要素です。このボタンに回転効果を付けていきます。
CSSによる3D回転効果の設定
次に、CSSでスタイルとアニメーションを定義します。CSSだけで3D回転効果を作成できるため、JavaScriptを使わなくても簡単に動きのあるボタンを実現できます。
body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #f0f0f0;}.button-container { perspective: 1000px; /* 3D効果を強調するためのパース */}.flip-button { font-size: 18px; padding: 15px 30px; border: none; color: white; background-color: #3498db; cursor: pointer; outline: none; transition: transform 0.6s; transform-style: preserve-3d; transform: rotateY(0); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);}.flip-button:hover { transform: rotateY(180deg); /* マウスオーバー時にボタンを180度回転 */}.flip-button::before { content: "Back Side"; position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background-color: #2ecc71; color: white; backface-visibility: hidden; transform: rotateY(180deg);}.flip-button::after { content: "Front Side"; position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background-color: #3498db; color: white; backface-visibility: hidden; transform: rotateY(0deg);}ポイント解説perspective3Dの奥行きを設定するプロパティです。値が大きいほど、奥行きが深くなり、立体感が強くなります。
transform-style: preserve-3d要素が回転する際に、3D空間での立体的な効果を維持するための設定です。
backface-visibility回転時に裏面が見えないように設定します。これにより、裏面が透けることなく、きれいな回転効果が実現できます。
::beforeと::afterボタンの前面と背面をそれぞれ定義しています。これにより、ひっくり返した際に「Back Side」と「Front Side」を表示します。
JavaScriptでの動きの追加（オプション）
CSSだけでこの効果は実現できますが、JavaScriptでさらに動きをコントロールすることも可能です。マウスオーバーやマウスアウトに対して、動的に回転を加える例を紹介します。
const button = document.querySelector('.flip-button');button.addEventListener('mouseover', () => { button.style.transform = 'rotateY(180deg)';});button.addEventListener('mouseout', () => { button.style.transform = 'rotateY(0deg)';});ポイント解説addEventListener('mouseover')マウスオーバー時にボタンが回転するように、transformプロパティを変更します。
addEventListener('mouseout')マウスがボタンから外れたときに、元の状態に戻る動きを設定します。
まとめ
今回のチュートリアルでは、CSSとJavaScriptを使用して、マウスオーバーでひっくり返る3Dボタンの作り方を紹介しました。3D回転効果を取り入れることで、Webサイトのデザインに動きを加え、ユーザーの関心を引くことができます。CSSのみでも実装できますが、JavaScriptで細かく制御することで、より柔軟なインタラクションを実現できます。
ぜひ、このコードを応用して、自分だけのカスタムボタンを作ってみてください！
お気に入り