ログイン

問題6 扉のように開くボタン

CSSAnimationの問題

CSSAnimation

扉のように開くボタン

問題

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

自分の環境に書くコード

              <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で回転させたら完成です。
ログインして解答を見る
完了にする!
LINEの友達追加でお役立ち動画をGET!!