画像回転のCSS生成

CSS3で追加された「animetion」を利用すると、画像の回転は簡単にできます。画像を目立たせたい場合やホームページのデザインとして、有効な手段となります。

当ページでは、簡単な操作で画像回転のCSSを自動で作成できます。「横軸回転」「縦軸回転」「時計回り」「反時計回り」に対応しています。各回転の組み合わせも簡単に確認できますので、是非お試しください。

<img class="roll" src="img_sample.png" alt="サンプル画像">

<style type="text/css">
.roll {
  animation: rollAnime 2s infinite;
;
}
@keyframes rollAnime {
   50% {transform: rotateX(180deg);}
  100% {transform: rotateX(360deg);}
}
</style>