文字の画像(イメージ)化
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
広告

生成できるホームページ・パーツ一覧
文字のデザイン・動作の生成文字のデザイン
画像のデザイン・動作の生成画像のデザイン
ボタンのデザイン・動作の生成ボタンのデザイン
入力項目のデザイン・動作の生成入力項目のデザイン
表のデザイン・動作の生成テーブルのデザイン
BOXのデザイン・動作の生成BOXのデザイン
吹き出しのデザイン・動作の生成吹き出しのデザイン
HTMLページのデザイン・動作の生成ページのデザイン
図形のデザイン・動作の生成図形のデザイン
ご利用時の注意事項・制約事項
よくあるご質問
何で無料なの？
生成コードに利用制限はある？
生成コードに保証はある？
jQueryで生成できない？

広告
ページTOP

当サイト内の関連するページ

便利なCSS、JavaScriptの自動生成一覧
sample
CSSで
透かし文字

CSS背景文字
CSS
blink

CSSブリンク
CSSで改行位置を指定する。

CSS改行位置
先頭文字を大きくするCSS

先頭文字
フォントサイズ
10 12 14

文字サイズ
文字の
影付け

影付け
文書先頭のインデントをCSSで指定

インデント
言語切り替え

言語切換え
CSSで
縁取り

CSS文字縁取り
SVGで縁取り

SVG文字縁取り
文字重ね

画像文字重ね
NEW,UPのマーク付け

NEW,UP
文字を
遠近表示

遠近・奥行
1文字回転縦軸回転

文字の回転
縦長横長

縦長・横長
文字スクロール

スクロール
マウスで文字選択の色をCSSで変更

マウス選択色
左斜体文字右斜体文字

斜体文字
文字をマーカーなどで強調する

文字の強調

縦書き

CSSで文書を縦書きにする

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