読者です 読者をやめる 読者になる 読者になる

ねっとぱんだ

webdesignとprogramingの勉強ブログ。

【CSS,HTML】transformでボタンをアニメーションさせる(Todays code)

HTML・CSS

transformでボタンのアニメーションを作りました。

ハンバーガーメニューの変形

不要論もあるハンバーガーメニューですが、アニメーションの練習として製作してみました。

上下二本が傾いてXに変形

●Demo

html

<div class="button1">
<span></span>
<span></span>
<span></span>
</div>

css

/*button*/
.button1{
  position:relative;
  height:100px;
  width:100px;
  margin-bottom:30px;
  transition:transform  0.4s;
}
.button1 span{
  display:inline-block;
  position:absolute;
  background:#000;
  width:100%;
  height:4px;
  transition:transform  0.4s,opacity 0.2s;
}
.button1 span:first-of-type{
  top;:0;
}
.button1 span:nth-child(2){
  top:50px;
}
.button1 span:nth-child(3){
  bottom:0;
}
/*button:hover*/
.button1:hover span:first-of-type{
  position:absolute;
  transform:translateY(50px)rotate(45deg);
  top:;0
}
.button1:hover span:nth-of-type(2){
  opacity:0;
}
.button1:hover span:nth-of-type(3){
  position:absolute;
  transform:translateY(-50px)rotate(-45deg);
  bottom:0;
}

回転してXに変形

●Demo

html

<div class="button2">
<span></span>
<span></span>
<span></span>
</div>

css

/*button*/
/*button2*/
.button2{
  position:relative;
  height:100px;
  width:100px;
  margin-bottom:30px;
  transition:transform  0.4s,opacity 0.2s;
}
.button2 span{
  display:inline-block;
  position:absolute;
  background:#000;
  width:100%;
  height:4px;
  transition:transform  0.4s,opacity 0.2s;
}
.button2 span:first-of-type{
  top;:0;
}
.button2 span:nth-child(2){
  top:50px;
}
.button2 span:nth-child(3){
  bottom:0;
}
/*button2:hover*/
.button2:hover{
  transform: rotate(360deg);
}
.button2:hover span:first-of-type{
  position:absolute;
  transform:translateY(50px)rotate(45deg);
  top:;0
}
.button2:hover span:nth-of-type(2){
  opacity:0;
}
.button2:hover span:nth-of-type(3){
  position:absolute;
  transform:translateY(-50px)rotate(-45deg);
  bottom:0;
}

transformとperspectiveで3D的な動きのボタン

●Demo

html

<div class="button2">
<span></span>
<span></span>
<span></span>
</div>

css

/*全体の変化のスピード*/
.button3,.button3::after {
	transition: all .3s;
}
/*最初に見えているボタン*/
.button3 {
  color: #333;
  line-height: 54px;
  border: 2px solid #333;
  box-sizing: border-box;
  height: 54px;
  text-align: center;
  width: 200px;
	position: relative;
  /*デフォルトより前面に出している*/
	z-index: 2;
  /*3Dのパースを指定*/
	perspective: 300px;
  /*3D空間を指定*/
	transform-style: preserve-3d;
}
.button3::after {
  position: absolute;
  display: block;
  content: '';/*空のコンテンツを入れている*/
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #333;
  transform-origin: center top;
  /*X軸を中心に90度の位置
  (つまり垂直になっていて見えない)*/
  transform: rotateX(90deg);
  opacity: 0;
}
.button3:hover {
	color: #fff;
}
.button3:hover::after {
  /*背面へ下げる*/
  z-index: -1;
  /*X軸を中心に0度の位置
  (回転していない=デフォルトの位置)*/
	transform: rotateX(0);
	opacity: 1;
}