【CSS】要素を回転させるCSSアニメーション(横回転・X軸回転・Y軸回転)

2019年4月8日CSS

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

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

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

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

要素を横回転させるには角度を指定するtransform: rotate()を@keyframesで指定してアニメーションさせます

単位は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軸回転

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

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

単位は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軸回転

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

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

単位は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年4月8日CSSCSSアニメーション

Posted by ヨウスケ