ログイン
問題6

扉のように開くボタンを作ろう

アイコン画像

問題6:扉のように開くボタンを作ろう

扉のように開くボタンを作成しましょう!

エディターのアイコンあらかじめエディタに書くコード

                <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¥
              

ブラウザのアイコン期待する画面


タグアイコン解答ソースコード

              .btn{
  perspective: 500px;
}
.btn::before{
  transform-origin: left;
}
.btn::after{
  transform-origin: right;
}
.btn:hover::before{
  transform: rotateY(-90deg);
}
.btn:hover::after{
  transform: rotateY(90deg);
}
¥CSS¥
            

コメントのアイコン解説

今回の肝となるのはperspectiveでしょうか。今までのアニメーションは奥行きをつけるといっても影などで表現する程度でしたが、perspectiveによって、本当に遠方からみているようなアニメーションが実現できます。perspectiveはそのままの意味でどれだけ離れたところからみている設定にするかを設定できます。次にtransform-originですが、これはtransformする原点または基準軸を決めてくれます。今回はright、leftによって右軸、左軸に設定しました。あとは簡単でtransform、rotateで回転させたら完成です。
ログインして解答を見る
完了にする!
twitterのアイコン
活動記録をTweetする
CSSAnimationを学ぶなら現役エンジニア監修「甲賀コース」
LINEの友達追加でお役立ち動画をGET!!

閉じる