文字の画像(イメージ)化
cman.jp cman.jp > パーツ作成メニュー > 文字のデザイン > 文字の奥行・遠近表示

文字の奥行・遠近に表示するCSS作成

CSSの「transform」を利用すると、文字を奥行・遠近に表示することは簡単にできます。
「上から見た遠近文字」や「右から見た遠近文字」など色々とお試しください。

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

文字を奥行・遠近に表示して見よう

奥行
角度
深さ
方角
奥行文字
使用したhtml
<span class="perspective">奥行文字</span>
生成したCSS
.perspective {
  display     : inline-block;       /* 奥行表示のためのブロック化 */
  font-size   : 48pt;               /* 文字サイズ */
  transform   : perspective(150px)
                rotateX(45deg);     /* 奥行 */
}
「transform」の使い方は以下を参照ください。
transform 「変形」
ページTOP
広告
広告

色々な文字の奥行・遠近

画像やイラストでも同じ指定で奥行・遠近に表示できます

画像やイラスト、DIVなどのブロック要素などでも違いはありません。

原寸 横1.5倍 縦1.5倍
<span class="sample11"><img src="neko.png" alt="原寸"></span>
<span class="sample12"><img src="neko.png" alt="横1.5倍"></span>
<span class="sample13"><img src="neko.png" alt="縦1.5倍"></span>
<style type="text/css">
.sample11{
  display   : inline-block;
  margin    : 15px;
}
.sample12{
  display   : inline-block;
  margin    : 15px;
  transform : perspective(80px)
              rotateX(60deg);
}
.sample13{
  display   : inline-block;
  margin    : 15px;
  transform : perspective(80px)
              rotateX(300deg);
}
</style>
ページTOP

アニメーション

CSSの「animation」を使用することで、文字の奥行・遠近を回転することもできます。

文字の奥行回転
<style type="text/css">
.sample2{
  display  : inline-block;
  font-size: 24pt;
  animation: sample2Anime 4s alternate infinite; /* アニメーション指定 */
}
@keyframes sample2Anime{
   0% { transform: perspective(150px) rotateY(0deg);   }
 100% { transform: perspective(150px) rotateY(360deg); }
}
</style>
文字の回転は以下を参照ください。
文字回転のCSS生成
ページTOP

注意事項

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

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

ページTOP
広告

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

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