要素を回転させるCSSアニメーションサンプル

2019-05-15CSSCSSアニメーション

CSSアニメーションで要素を回転させる方法

CSSアニメーションで要素を回転させるサンプルコードです。X軸回転・Y軸回転での回転アニメーションを紹介しています。

CSSアニメーションを使って要素を回転

要素を回転させるCSSアニメーションのサンプルです。

See the Pen CSS rotate animation by yochans (@yochans) on CodePen.

要素を横回転させるには角度を指定するtransform: rotate()を@keyframesで指定してアニメーションさせます。transform: rotate()の指定可能な値の単位はdegになります。

HTML

<div class="box"></div>

CSS

  animation: animName 2s linear infinite;
  width:50px;
  height:50px;
  background:#0091EA;
  margin:20px;
}

.box{
@keyframes animName {
 0%{
    transform: rotate(0deg);
   }
100%{
    transform: rotate(360deg);
   }
}

CSSアニメーションを使って要素を縦回転

要素を縦回転(X軸回転)させるCSSアニメーションのサンプルです。

See the Pen CSS rotate animation X axis by yochans (@yochans) on CodePen.

要素をX軸回転させるにはX軸での角度を指定するtransform: rotateX()を@keyframesで指定してアニメーションさせます。transform: rotateX()の指定可能な値の単位はdegになります。

HTML

<div class="box"></div>

CSS


.box{
  animation: animName 2s linear infinite;
  width:50px;
  height:50px;
  background:#0091EA;
  margin:20px;
}

@keyframes animName {
 0%{
    transform: rotateX(0deg);
   }
100%{
    transform: rotateX(360deg);
   }
}

CSSアニメーションを使って要素を横回転

要素を横回転(Y軸回転)させるCSSアニメーションのサンプルです。

See the Pen CSS rotate animation Y axis by yochans (@yochans) on CodePen.

要素をY軸回転させるにはY軸での角度を指定するtransform: rotateY()を@keyframesで指定してアニメーションさせます。transform: rotateY()の指定可能な値の単位はdegになります。

HTML

<div class="box"></div>

CSS

.box{
  animation: animName 2s linear infinite;
  width:50px;
  height:50px;
  background:#0091EA;
  margin:20px;
}

.box{
@keyframes animName {
 0%{
    transform: rotateY(0deg);
   }
100%{
    transform: rotateY(360deg);
   }
}

transform-originで基準点を指定する

要素の形状によっては、回転する基準点が目的の位置と違いズレてしまう事もあります。その場合はCSSのtransformに対する基準点はtransform-originにて基準点を指定する事が可能です。

transform-origin:50% 50%;

transform-originの初期値

水平方向50%
垂直方向50%

transform-originで指定可能な値

transform-originではパーセントでの指定と、文字列値での指定が可能です。

水平方向left center right
垂直方向top center bottom

また水平方向と垂直方向が同じ値の場合は、ひとつの記述でも可能です。

transform-origin:50%;

2019-05-15CSSCSSアニメーション

Posted by Yousuke.U