目次
CSSアニメーションで右回転させる方法
よく使用されるCSSアニメーションで右回りの回転をさせるにはtransform: rotateで0degから360degを指定してanimationで動かす。
/*
<div class="star star1">★</div>
*/
.star {
display: inline-block;
font-size: 3em;
}
.star1 {
animation: r1 1s linear infinite;
}
@keyframes r1 {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
⭐
CSSアニメーションで左回転させる方法
逆回転の場合は360degを-360degにする。
.star2 {
animation: r2 1s linear infinite;
}
@keyframes r2 {
0% { transform: rotate(0deg); }
100% { transform: rotate(-360deg); }
}
⭐
CSSアニメーションで右・左回転を繰り返す方法
animationにalternateを追加する。
.star3 {
animation: r3 1s linear infinite alternate;
}
@keyframes r3 {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
⭐
秒針のように1秒で6度回転する方法
6度は360度 / 6 なのでanimationで60s steps(60)を指定する。
これは60s steps(60) => 1s steps(1) なので1秒で6度となる。
.star4 {
animation: r4 60s steps(60) infinite;
}
@keyframes r4 {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
⭐
秒針のように中央下を基点に回転する方法
秒針のように中央下を基点に動かすにはtransform-origin: center bottomを指定する。
.star5 {
animation: r5 1s linear infinite;
transform-origin: center bottom;
}
@keyframes r5 {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
⭐
X軸を軸とする角度で回転する方法
transform: rotateXを指定する。
.star6 {
animation: r6 1s linear infinite;
}
@keyframes r6 {
0% { transform: rotateX(0deg); }
100% { transform: rotateX(360deg); }
}
⭐
Y軸を軸とする角度で回転する方法
transform: rotateYを指定する。
.star7 {
animation: r7 1s linear infinite;
}
@keyframes r7 {
0% { transform: rotateY(0deg); }
100% { transform: rotateY(360deg); }
}
⭐
X軸を軸とする角度で左上基点で回転
transform: rotateX, transform-origin: left topを指定する。
.star8 {
animation: r8 1s linear infinite;
transform-origin: left top;
}
@keyframes r8 {
0% { transform: rotateX(0deg); }
100% { transform: rotateX(360deg); }
}
⭐
Y軸を軸とする角度で左上基点で回転
transform: rotateY, transform-origin: left topを指定する。
.star9 {
animation: r9 1s linear infinite;
transform-origin: left top;
}
@keyframes r9 {
0% { transform: rotateY(0deg); }
100% { transform: rotateY(360deg); }
}
⭐
Y軸を軸として裏も見えるよう回転
表と裏の要素を用意してtransform-style: preserve-3d, backface-visibility: hiddenを指定する。
backface-visibilityはベンダープレフィックス(-webkit-)を付けないとChrome以外のブラウザだと正しく表示されないことが多いため注意。
.flip {
width: 1em;
height: 1em;
margin-bottom: 1em;
animation: flip 5s linear infinite;
transform-style: preserve-3d;
font-size: 5em;
}
@keyframes flip {
0% {
transform: rotateY(0deg);
}
100% {
transform: rotateY(360deg);
}
}
.front,
.back {
position: absolute;
top: 0;
left: 0;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.back {
transform: rotateY(180deg);
}
<div class="flip"> <div class="front">🌕</div> <div class="back">🌑</div> </div>
🌕
🌑
Y軸を軸として裏も見えるよう横移動しながら回転
前述のwidth: 1emを削除すればwidth: 100%になり、横移動が追加される。
.flip2 {
height: 1em;
margin-bottom: 1em;
animation: flip 5s linear infinite;
transform-style: preserve-3d;
font-size: 5em;
}
@keyframes flip {
0% {
transform: rotateY(0deg);
}
100% {
transform: rotateY(360deg);
}
}
.front,
.back {
position: absolute;
top: 0;
left: 0;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.back {
transform: rotateY(180deg);
}
🌕
🌑
