問題
6
CSSアニメーション
扉のように開くボタンを作ろう
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¥
期待する画面
解答と解説（扉のように開くボタンを作ろう）
解説
LINE登録して解答を見る
※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます
今回の肝となるのはperspectiveでしょうか。今までのアニメーションは奥行きをつけるといっても影などで表現する程度でしたが、perspectiveによって、本当に遠方からみているようなアニメーションが実現できます。perspectiveはそのままの意味でどれだけ離れたところからみている設定にするかを設定できます。次にtransform-originですが、これはtransformする原点または基準軸を決めてくれます。今回はright、leftによって右軸、左軸に設定しました。あとは簡単でtransform、rotateで回転させたら完成です。
