Front-endTools

transform 2D / 3D ジェネレーター

直感的な操作でtrasnsform(変形)の実行結果をシミュレートする為のツールです。
translate(移動), rotate(回転), scale(拡大・縮小), skew(歪み)を2D/3D方向に直感的に操作可能!transform-origin(回転軸), perspective(パース・視点), perspective-origin(消失点)にも対応しています。
また、対象要素や元となるX,Y,Z軸を視覚的に表示可能です

front
back
rightSide
leftSide
top
bottom
.original-transform {
}

ツールを使用するにあたっての注意

  • 基本的にCSSはリセットされている前提で、コードを出力していますのであらかじめご了承ください。
  • ブラウザやサイト・お使いのCSSフレームワークによってはプレビューと異なる結果で表示されることがあります。表示結果が異なってしまう場合は、ブラウザの検証ツール(デベロッパーツール)などをお使いいただき、CSSプロパティが競合してしまっていないかなどを確認してください。
  • 当ツールはモダンブラウザを考慮した設計になっており、Internet Explorerや古いバージョンのブラウザに対応しない場合がありますので、ご注意ください

スタイルエディター

その他の指定

ツールの使い方について

・ツールの使い方が今いち分からない
・色々な活用の方法を知りたい
・各項目の詳細を知りたい
という方の為に、内容や特徴の紹介と使い方を説明した動画を用意しました。

ご活用ください。

ジェネレーターの一覧

その他ツールの一覧

フロントエンド学習に行き詰まってる方、もっと深く知りたい方へ

  • フリーランスとして生きていきたい。
  • HTML / CSSの書き方が分からない・不安がある
  • きちんと会社のホームページやブログを作ってみたい!
  • 「WEB担当」になってしまったけど、全然分からなくて、不安…。
  • 好きな時間に好きな場所で仕事出来るようになりたい!
  • しっかり技術を身につけて、収入を上げたい。
  • 簡単に効率的にホームページを作れる方法やツールが知りたい!
  • 全くの初心者なので、プロからしっかりと学んでみたい
  • 外注すると高いので、自分で身に付けたい

こういった悩み・希望などがある方向けに、初心者から中・上級者まで「マンツーマンの講義」をおこなっております。
是非一度ご相談ください。

各CSSプロパティの説明

transform

transformプロパティは要素を変形させることができます。
transformには次の4つの値が存在し、指定することができます。

  • translate(移動)
  • rotate(回転)
  • scale(伸縮)
  • skew(傾斜)
組み合わせて指定する場合は、スペースで区切ります。
記述例) transform: scale(1.1) skew(10deg);
初期値はnoneです。

skew以外の値は、X, Y, Z軸方向(3D)の指定が可能です。skewはX, Y軸方向のみです。
例えばtranslateのX軸のみ指定する場合は、以下のように指定することができます。
記述例) transform: translateX(10px);

transformについて、さらに詳しく知りたい方はこちらの解説動画を参照してください

transform3d

CSSで3Dの表現をする時は、transformプロパティの「translate」「rotate」「scale」を使うことで実現ができます。

特に「translateZ」「rotateX」「rotateY」「scaleZ」を指定することで3D方向の表現をおこなうことができます。
記述例) transform: rotateX(10deg) rotateY(35deg);

ただし、transformプロパティを用いるだけだと3Dの表現として感じることができないので、
transformを指定した親要素に「transform-style: preserve-3d;」という形で指定してあげる必要があります。(初期値はflat)

さらに、「perspective」を指定することで、パースを指定することができ、遠近感を設定することができます。
記述例) perspective: 1000px;

「perspective-origin」を指定することで、消失点を変更することもできます。初期値は50% 50%(それぞれXとY軸)です。