文字の画像(イメージ)化
cman.jp cman.jp > パーツ作成メニュー > 画像のデザイン > 画像を回転する

画像回転のCSS生成

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

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

画像を回転させ見よう

回転速度
回転方向
サンプル画像
使用したhtml
<img class="roll" src="img_sample.png" alt="サンプル画像">
生成したCSS
<style type="text/css">
.roll {
  animation: rollAnime 2s infinite;
;
}
@keyframes rollAnime {
   50% {transform: rotateX(180deg);}
  100% {transform: rotateX(360deg);}
}
</style>
「animation」の使い方は以下を参照ください。
animation 「アニメーション」の構文
広告
広告
ページTOP

注意事項

CSSの「animation」を使用しています。「animation」は、古いブラウザや一部ブラウザでは動作しません。

「animation」の使い方は以下を参照ください。
animation 「アニメーション」

ページTOP
広告

生成できるホームページ・パーツ一覧
ご利用時の注意事項・制約事項
よくあるご質問
何で無料なの?
生成コードに利用制限はある?
生成コードに保証はある?
jQueryで生成できない?

広告
ページTOP
広告
QrCode
このページのURL
スマートフォン・タブレット
運営:株式会社シーマン