問題
6CSS回転で扉風ボタンを作ろう
CSSでボタンに動きをつけると、静的なデザインよりも視覚的な印象を大きく変えることができます。
特にhover時の変化は、ユーザーの操作性やサイト全体の体験にも影響する重要な要素です。
本記事では、シンプルなボタンデザインに動きを加えながら、CSSだけで自然な奥行きや変化を表現する方法を解説します。
複雑なライブラリを使わず、基本的なCSSの仕組みだけでUI表現の幅を広げる手順を紹介します。
CSSアニメーションの問題に挑戦しよう！
問題
「CSS回転で扉風ボタンを作ろう」
CSS回転を使って、hover時に扉のように開くボタンを作成してください。
シンプルなボタンに動きを加え、視覚的に変化するユーザーインターフェース（UI）をCSSのみで実装することを目標とします。
あらかじめエディタに書くコード
<div class="btn">ここをクリック</div>
¥HTML¥
.btn{
width: 200px;
height: 50px;
line-height: 50px;
text-align: center;
border: 2px solid black;
position: relative;
color: white;
cursor: pointer;
}
.btn::before,.btn::after{
position: absolute;
content: "";
width: 50%;
height: 100%;
top: 0;
background-color: black;
z-index: -1;
transition: .5s;
}
.btn::before{
left: 0;
}
.btn::after{
right: 0;
}
.btn:hover{
color: black;
}
¥CSS¥
期待する画面
解答と解説（CSS回転で扉風ボタンを作ろう）
解説
※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます
今回の扉のように開くボタンの実装では、まずperspectiveが重要な役割を持ちます。
これは要素に奥行きを与えるためのプロパティで、「どの距離から見ているか」という視点をCSS上で再現します。
従来のアニメーションでは影や拡大縮小で奥行きを表現していましたが、perspectiveを使うことで、実際に立体空間の中で動いているような3D表現が可能になります。
次にtransform-originを左右それぞれの疑似要素に設定し、回転の基準軸を分けることで、左右が独立して“扉の蝶番”のように開く動きを作ります。
そして最後に transform とrotateY を組み合わせることで、ホバー時に左右の要素がY軸を中心に回転し、扉が開くアニメーションが完成します。
この3つを組み合わせることで、CSSのみでもライブラリを使わずに立体的なUI表現を実現できます。
補足
このようなCSSの3D回転表現は、単なる装飾ではなくUI設計の幅を広げる重要なテクニックです。
扉アニメーションだけでなく、カードのフリップ表現やナビゲーションメニューの開閉など、インタラクティブなUI全般に応用できます。
また、視覚的な動きはユーザー操作に対するフィードバックとして機能し、クリック可能な要素の認識性を高める効果もあります。
CSSのみで実装できるため軽量であり、外部ライブラリに依存せずに表現力を向上できる点も大きなメリットです。
関連問題もあわせて挑戦してみましょう。
・CSSアニメーション初級：キラッと光るボタンを作ろう【3ステップ】
・CSSアニメーション問題集一覧：CSSアニメーション問題集トップ
・CSSの基礎から学びたい方：CSS入門講座
ポイント
CSS回転で扉のように開くボタンの実装構造
扉のように開くボタンは、CSSの3D回転と基準位置の調整を組み合わせて実装します。
まずボタンは左右2つの領域に分割し、それぞれを疑似要素として独立させることで中央から開く構造を作ります。
次に親要素へperspectiveを指定し、要素に奥行きを持たせることで、平面的ではなく立体的な動きとして表現できる状態を作ります。
さらに左右それぞれにtransform-originを設定し、左側は右端、右側は左端を基準にすることで、中央を支点とした回転構造になります。
最後にhover時にrotateYを適用し、左側を-90度、右側を90度回転させることで、扉が左右に開くアニメーションが完成します。
