cman.jp画像の奥行・遠近に表示するCSS作成
CSSの「transform」を利用すると、画像を奥行・遠近に表示することは簡単にできます。
「上から見た遠近画像」や「右から見た遠近画像」など色々とお試しください。
当ページでは、簡単な操作でCSSを自動で作成できます。
画像を奥行・遠近に表示して見よう
奥行
| 角度 |
|
|---|---|
| 深さ |
|
方角
使用したhtml
<img class="perspective" src="../img-sample.png" alt="サンプル画像">
生成したCSS
.perspective {
display : inline-block; /* 奥行表示のためのブロック化 */
transform : perspective(150px) /* 深さ */
rotateX(20deg); /* 角度 */
}
「transform」の使い方は以下を参照ください。
transform 「変形」
transform 「変形」
広告
広告
色々な画像の奥行・遠近
文字でも同じ指定で奥行・遠近に表示できます
文字でも違いはありません。
文字の奥行
<span class="sample1>文字の奥行</span>
<style type="text/css"> .sample1{ display : inline-block; font-size: 48pt; transform : perspective(80px) rotateX(60deg); } </style>
文字の奥行・遠近は以下を参照ください。
文字の奥行・遠近のCSS生成
文字の奥行・遠近のCSS生成
アニメーション
CSSの「animation」を使用することで、画像の奥行・遠近を回転することもできます。
<style type="text/css"> .sample2{ display : inline-block; animation: sample2Anime 4s alternate infinite; /* アニメーション指定 */ } @keyframes sample2Anime{ 0% { transform: perspective(150px) rotateY(0deg); } 100% { transform: perspective(150px) rotateY(360deg); } } </style>
画像の回転は以下を参照ください。
画像回転のCSS生成
画像回転のCSS生成
注意事項
CSSの「animation」を使用しています。「animation」は、古いブラウザや一部ブラウザでは動作しません。
「animation」の使い方は以下を参照ください。
animation 「アニメーション」
広告
| 生成できるホームページ・パーツ一覧 | |
 文字のデザイン | |
 画像のデザイン | |
 ボタンのデザイン | |
 入力項目のデザイン | |
 テーブルのデザイン | |
 BOXのデザイン | |
 吹き出しのデザイン | |
 ページのデザイン | |
 図形のデザイン | |
| ご利用時の注意事項・制約事項 | |
| よくあるご質問 | |
| 何で無料なの？ | |
| 生成コードに利用制限はある？ | |
| 生成コードに保証はある？ | |
| jQueryで生成できない？ | |
広告
広告
スマートフォン・タブレット | 運営:株式会社シーマン |