ぐるぐる
画像を回転させます。
https://gyazo.com/bab1e560cf27266b622c1cdc034f2d2a
settings に書くと酔う。
https://gyazo.com/440b3c40a334e0da69f597f16c5c544e
以下のCSSコードの いずれかの .css番号 の数字を消して、 RUNボタンして下さい。
目が回ります。
ページのリロードで元に戻ります。
.css5 遊園地にこんなのがあるような・・・・
グルグル状態の画像を Gyazo って ページの見出し画像に使ったりして下さい。
code:RUN.ja
空っぽですが、ページ内に必要です。
code:RUN.css1
.image {
transform-style: preserve-3d;
animation: flip 3s linear infinite;
}
@keyframes flip {
0% { transform: rotateY(0deg); }
50% { transform: rotateY(180deg); }
100% { transform: rotateY(360deg); }
}
code:RUN.css2
.image {
transform-style: preserve-3d;
animation: flip 3s linear infinite;
}
@keyframes flip {
0% { transform: rotateX(0deg); }
50% { transform: rotateX(180deg); }
100% { transform: rotateX(360deg); }
}
code:RUN.css3
.image {
animation: spin-right 3s linear infinite;
}
@keyframes spin-right {
0% { transform: rotateZ(0deg); }
100% { transform: rotateZ(360deg); }
}
code:RUN.css4
.image {
animation: spin-left 3s linear infinite;
}
@keyframes spin-left {
0% { transform: rotateZ(0deg); }
100% { transform: rotateZ(-360deg); }
}
code:RUN.css5
.image {
transform-style: preserve-3d;
animation: flip-spin 3s linear infinite;
}
@keyframes flip-spin {
0% { transform: rotateY(0deg) rotateZ(0deg); }
50% { transform: rotateY(180deg) rotateZ(180deg); }
100% { transform: rotateY(360deg) rotateZ(360deg); }
}
code:RUN.css6
.image {
transform-style: preserve-3d;
animation: flip-spin-scale 3s linear infinite;
}
@keyframes flip-spin-scale {
0% { transform: rotateZ(0deg) scale(1); }
25% { transform: rotateZ(90deg) scale(0.75); }
50% { transform: rotateZ(180deg) scale(0.5); }
75% { transform: rotateZ(270deg) scale(0.75); }
100% { transform: rotateZ(360deg) scale(1); }
}