JavaScriptとCSSで作る！マウスオーバーでひっくり返る3Dボタンの実装方法

Posted on by

今回は、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);
}

ポイント解説

perspective

3Dの奥行きを設定するプロパティです。値が大きいほど、奥行きが深くなり、立体感が強くなります。

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で細かく制御することで、
より柔軟なインタラクションを実現できます。

ぜひ、このコードを応用して、自分だけのカスタムボタンを作ってみてください！