cman.jp傾斜画像・斜体画像のCSS作成
「transform」を使用すると、色々な角度の画像を作成することが出来ますので色々とお試しください。
当ページでは、簡単な操作でCSSを自動で作成できます。
画像を傾けて見よう
角度
方角
使用したhtml
<img class="skew" src="../img-sample.png" alt="サンプル画像">
生成したCSS
.skew {
display : inline-block; /* 奥行表示のためのブロック化 */
transform : skewX(45deg); /* 傾き角度 */
}
「transform」の使い方は以下を参照ください。
transform 「変形」
transform 「変形」
広告
広告
色々な傾斜画像・斜体画像
横と縦の両方の傾きを指定
横方向、縦方向の両方の角度を指定することもできます。
<style type="text/css"> .sample1{ display : inline-block; transform : skew(35deg, 15deg); /* 横角度, 縦角度 */ } </style>
文字でも同じ指定で傾斜文字が表示できます
文字でも違いはありません。
傾斜文字
<span class="sample2">傾斜文字</span>
<style type="text/css"> .sample2{ display : inline-block; font-size: 24pt; transform : skewX(45deg); } </style>
傾斜文字・斜体文字は以下を参照ください。
傾斜文字・斜体文字のCSS生成
傾斜文字・斜体文字のCSS生成
アニメーション
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生成
画像回転のCSS生成
注意事項
CSSの「animation」を使用しています。「animation」は、古いブラウザや一部ブラウザでは動作しません。
「animation」の使い方は以下を参照ください。
animation 「アニメーション」
広告
| 生成できるホームページ・パーツ一覧 | |
 文字のデザイン | |
 画像のデザイン | |
 ボタンのデザイン | |
 入力項目のデザイン | |
 テーブルのデザイン | |
 BOXのデザイン | |
 吹き出しのデザイン | |
 ページのデザイン | |
 図形のデザイン | |
| ご利用時の注意事項・制約事項 | |
| よくあるご質問 | |
| 何で無料なの？ | |
| 生成コードに利用制限はある？ | |
| 生成コードに保証はある？ | |
| jQueryで生成できない？ | |
広告
広告
スマートフォン・タブレット | 運営:株式会社シーマン |