文字の画像(イメージ)化
cman.jp cman.jp > パーツ作成メニュー > 画像のデザイン > 傾斜画像・斜体画像

傾斜画像・斜体画像のCSS作成

transform」を使用すると、色々な角度の画像を作成することが出来ますので色々とお試しください。

当ページでは、簡単な操作でCSSを自動で作成できます。

画像を傾けて見よう

角度
方角
サンプル画像
使用したhtml
<img class="skew" src="../img-sample.png" alt="サンプル画像">
生成したCSS
.skew {
  display     : inline-block;       /* 奥行表示のためのブロック化 */
  transform   : skewX(45deg);       /* 傾き角度 */
}
「transform」の使い方は以下を参照ください。
transform 「変形」
ページTOP
広告
広告

色々な傾斜画像・斜体画像

横と縦の両方の傾きを指定

横方向、縦方向の両方の角度を指定することもできます。

サンプル画像
<style type="text/css">
.sample1{
  display   : inline-block;
  transform : skew(35deg, 15deg);  /* 横角度, 縦角度 */
}
</style>
ページTOP

文字でも同じ指定で傾斜文字が表示できます

文字でも違いはありません。

傾斜文字
<span class="sample2">傾斜文字</span>
<style type="text/css">
.sample2{
  display   : inline-block;
  font-size: 24pt;
  transform : skewX(45deg);
}
</style>
傾斜文字・斜体文字は以下を参照ください。
傾斜文字・斜体文字のCSS生成
ページTOP

アニメーション

CSSの「animation」を使用することで、傾斜画像を回転することもできます。

サンプル画像
<style type="text/css">
.sample3{
  display  : inline-block;
  font-size: 24pt;
  animation: sample3Anime 4s alternate infinite; /* アニメーション指定 */
}
@keyframes sample3Anime{
   0% { transform: skew(-88deg);}  /* 横角度 */
  50% { transform: skew(0deg);}
 100% { transform: skew(88deg);}  /* 横角度 */
}
</style>
画像の回転は以下を参照ください。
画像回転のCSS生成
ページTOP

注意事項

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

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

ページTOP
広告
生成できるホームページ・パーツ一覧
ご利用時の注意事項・制約事項
よくあるご質問
何で無料なの?
生成コードに利用制限はある?
生成コードに保証はある?
jQueryで生成できない?
ページTOP
広告
QrCode
このページのURL
スマートフォン・タブレット
運営:株式会社シーマン