【CSS】簡単な要素の奥行回転アニメーションサンプル

2018年3月31日CSSCSSアニメーション

CSSで要素の奥行回転アニメーションを実装します

回転させる要素、今回は簡単な円をCSSで描きます

.circle{
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: solid 2px red;
}

マウスホバー時に実行するあニメーションを設定して、アニメーション時間をtransitionで指定します、単位はs(秒)です

.circle{
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: solid 2px red;
  transition: 10s;
  -webkit-transition: 10s;
}
.circle2:hover{
  transform: rotateY(7200deg);
  -webkit-transform: rotateY(7200deg);
}
 

 

rotateYでY軸での横回転になり、rotateXでX軸での縦回転になります

他の要素を変更したり追加して遊びます

.circle{
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: solid 2px red;
  transition: 10s;
  -webkit-transition: 10s;
}
.circle:hover{
  border: solid 2px red;
  transform: rotateY(7200deg);
  -webkit-transform: rotateY(7200deg);
}

要素の奥行回転アニメーションサンプル

※こちらではマウスホバーではなくクリック(タップ)時のアクションとしてあります

See the Pen Element Depth Rotation CSS Animation by yochans (@yochans) on CodePen.

2018年3月31日CSSCSSアニメーション

Posted by Yousuke.U