【CSS】マウスオーバーでボタンが縦方向に回転するアニメーション

本記事ではマウスオーバーでボタンが縦方向に回転するアニメーションをご紹介しています！

ページ上に設置してあるボタンにマウスカーソルを載せると、ボタンが縦方向にくるんと回転し、表面と裏面が切り替わる動きになります。具体的には下記のような動きになります。

See the Pen Hover Animation12 | CSS by ryohei (@intotheprogram) on CodePen.

「Front」と記載され部分にマウスカーソルを載せるとボタンが縦方向に回転して「Rear」と記載された面が表示されたかと思います。

下記の記事でボタンが横に回転するアニメーションをご紹介しましたが、その縦バージョンですね。

ボタンのマウスオーバーアニメーションは豊富な種類の中から選ぶことができますので、回転系アニメーションの選択肢の一つにいかがでしょうか。

では、解説していきます。

ボタンリンクを作成する

HTMLでボタンの形をしたリンク要素を作成します。回転前と回転後に表示される面を用意しましょう。本記事では回転前に表示される表面を「front」回転後に表示される裏面を「rear」としています。

HTML

<a href="#">
    <span class="front">Front</span>
    <span class="rear">Rear</span>
</a>

上記サンプルでは「a」タグを使用していますが「button」タグ等に変更していただいても問題ありませんので、環境に合わせて調整してください。

通常時・マウスオーバー時のスタイルを定義する

続いて作成したHTMLにスタイルを定義していきます。

下記にデモで使用しているSCSSをご用意しました。普段コーディングする際にあまり使用しないプロパティにはコメントを記載しておりますので、参考にしていただければと思います。

SCSS

a {
    position: relative;
    display: block;
    width: 320px;
    height: 60px;
    line-height: 60px;
    margin: 40px auto;
    text-align: center;
    text-decoration: none;
    color: #a8aabc;
    font-weight: bold;
    perspective: 300px; //要素に奥行きを持たせる
    
    span {
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 100%;
        color: #ffffff;
        transition: .5s;
        backface-visibility: hidden; //裏側の要素を表示しない
        transform-origin: center center -30px; //変形の原点を指定する
    }
    
    //表面
    .front {
        background-color: #384878;
        transform: rotateX(0);
    }

    //裏面    
    .rear {
        background-color: #a8aabc;
        transform: rotateX(90deg);
    }
    
    //マウスオーバーした際のスタイル
    &:hover {
        .front { transform: rotateX(-90deg); }
        .rear { transform: rotateX(0); }
    }
}

最後に

いかがでしたでしょうか。

マウスオーバーのアニメーションはCSSだけで実装することができ、簡単に要素い動きを付けることができます。Codepenなどのサービスで検索すれば世界中のエンジニアが作成したサンプルを見ることができるので、スキルアップの一環として定期的に覗くようにすると良いかもしれませんね！

以上、マウスオーバーでボタンが縦方向に回転するアニメーションのご紹介でした！