旅行HOMEHTML/CSS【CSS】マウスオーバーで奥行きのあるボタンが横に回転するアニメーション【CSS】マウスオーバーで奥行きのあるボタンが横に回転するアニメーション2020.02.08HTML/CSSBこんにちは、ryohei(@ityryohei)です!本記事ではマウスオーバーで奥行きのあるボタンが横にくるっと回転するアニメーションをご紹介しています。具体的には下記のデモのようなアニメーションになります。「Front」と記載されたボタンのようなリンクにマウスカーソルを載せてみてください。CodePen.いかがでしょうか。奥行きのあるボタンが横にくるっと回転して、裏側の要素が表示されたかと思います。このアニメーションはCSSで奥行きを出すことができる「perspective」と、要素を変形させる「transform-origin」と「rotate」で実現しています。スクリプトなどは使わずにCSSで簡単に実装することができるため、動作がとても軽く、また、普段見かけないマウスオーバーのアニメーションなので、ユニークなアニメーションをお探しの方におすすめです。本記事の内容ボタンリンクを作成する通常時とマウスオーバーした際のスタイルを定義する最後にでは、解説していきます。CSSで簡単実装!私が作成したマウスオーバーアニメーションまとめボタンリンクを作成するまずは元となるボタンリンクを作成していきます。デモをご覧いただいてわかる通り、本アニメーションは「表面」と「裏面」の要素が必要になります。表面は「front」で裏面は「rear」と命名してマークアップします。class="rear">Rear</span></a>通常時とマウスオーバーした際のスタイルを定義する続いて、上記で作成した要素にスタイルを定義します。下記の補足内容を参考にスタイルを作成しましょう。横方向に回転するアニメーションは「rotateY」で実装する要素に「perspective」で奥行きを持たせるtransform-originで変形の原点を決める下記はデモで使用しているSCSSの内容になります。普段使わないであろうプロパティには簡単にコメントを記載しております。}}最後にいかがでしたでしょうか。私は職業柄日々色々なWebサイトに接し、様々なタイプのデザイナーの方と仕事をさせていただいます。毎日新しい発見があり、新しいことを見つける度に感動と歯痒い気持ちになってしまいます。知らないことの方が多くて当たり前の業界ですが、一つでも多くのことを知っている人が頼られ、信頼され、仕事を任されるのだと私は思います。一日一つでも構いません。Webエンジニアご訪問いただきありがとうございます!本サイトを運営しているryoheiと申します。福岡のWeb制作会社でエンジニアをしています。本サイトは私が普段業務をする中で得た知識をアウトプットする場として2015年から運営しています。Programご訪問いただきありがとうございます!本サイトを運営しているryoheiと申します。福岡のWeb制作会社でエンジニアをしています。本サイトは私が普段業務をする中で得た知識をアウトプットする場として2015年から運営しています。into-the-program.com。