【CSS】マウスオーバーで奥行きのあるボタンが横に回転するアニメーション

こんにちは、Ryohei（@ityryohei）です！

本記事ではマウスオーバーで奥行きのあるボタンが横にくるっと回転するアニメーションをご紹介しています。

具体的には下記のデモのようなアニメーションになります。「Front」と記載されたボタンのようなリンクにマウスカーソルを載せてみてください。

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

いかがでしょうか。

奥行きのあるボタンが横にくるっと回転して、裏側の要素が表示されたかと思います。このアニメーションはCSSで奥行きを出すことができる「perspective」と、要素を変形させる「transform-origin」と「rotate」で実現しています。

スクリプトなどは使わずにCSSで簡単に実装することができるため、動作がとても軽く、また、普段見かけないマウスオーバーのアニメーションなので、ユニークなアニメーションをお探しの方におすすめです。

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

ボタンリンクを作成する

まずは元となるボタンリンクを作成していきます。デモをご覧いただいてわかる通り、本アニメーションは「表面」と「裏面」の要素が必要になります。表面は「front」で裏面は「rear」と命名してマークアップします。

HTML

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

通常時とマウスオーバーした際のスタイルを定義する

続いて、上記で作成した要素にスタイルを定義します。下記の補足内容を参考にスタイルを作成しましょう。

横方向に回転するアニメーションは「rotateY」で実装する
要素に「perspective」で奥行きを持たせる
transform-originで変形の原点を決める

下記はデモで使用しているSCSSの内容になります。普段使わないであろうプロパティには簡単にコメントを記載しております。より詳しく知りたい方はMDNをご参照いただければと思います！

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: 320px; //要素に奥行きを持たせる
    
    .front, .rear {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: block;
        color: #ffffff;
        transition: .5s;
        backface-visibility: hidden; //裏側の要素を表示しない
        transform-origin: center center -160px; //変形の原点を指定する
    }
    
    .front {
        background-color: #a8aabc;
        transform: rotateY(0);
    }
    
    .rear {
        background-color: #384878;
        transform: rotateY(-90deg);
    }
    
    //マウスオーバーした際のスタイル
    &:hover {
        .front { transform: rotateY(90deg); }
        .rear { transform: rotateY(0); }
    }
}