Front-endTools

Front-end Tools

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);
各指定は以下のようにも指定することができます。
translateの指定
  • translate(X軸方向の移動距離, Y軸方向の移動距離)
  • translateX(X軸方向の移動距離)
  • translateY(Y軸方向の移動距離)
  • translateZ(Z軸方向の移動距離)
  • translate3d(X軸方向の移動距離, Y軸方向の移動距離, Z軸方向の移動距離)
scaleの指定
  • scale(X軸方向の縮尺比率, Y軸方向の縮尺比率)
  • scaleX(X軸方向の縮尺比率)
  • scaleY(Y軸方向の縮尺比率)
  • scaleZ(Z軸方向の縮尺比率)
  • scale3d(X軸方向の縮尺比率, Y軸方向の縮尺比率, Z軸方向の縮尺比率)
rotateの指定
  • rotate(回転角度)
  • rotate3d(X軸を軸とする回転角度, Y軸を軸とする回転角度, Z軸を軸とする回転角度, 回転角度)
  • rotateX(X軸を軸とする回転角度)
  • rotateY(Y軸を軸とする回転角度)
  • rotateZ(Z軸を軸とする回転角度)
skewの指定
  • skew(X軸の傾斜角度, Y軸の傾斜角度)
  • skewX(X軸の傾斜角度)
  • skewY(Y軸の傾斜角度)
transformについて、さらに詳しく知りたい方はこちらの解説動画を参照してください。
transform3d
CSSで3Dの表現をする際には、transformプロパティの「translate」「rotate」「scale」を使うことで実現ができます。
特に「translateZ」「rotateX」「rotateY」「scaleZ」を指定することで3D方向の表現をおこなうことができます。
記述例） transform: rotateX(10deg) rotateY(35deg);
ただし、transformプロパティを用いるだけだと2Dの3Dの表現として感じることができないので、
transformを指定した親要素に「transform-style: preserve-3d;」という形で指定する必要があります。（初期値はflat）
さらに、「perspective」を指定することで、パースを指定することができ、遠近効果を設定することができます。
記述例） perspective: 1000px;
「perspective-origin」を指定することで、消失点を変更することもできます。初期値は50% 50%（それぞれXとY軸）です。
記述例） perspective-origin: 60% 80%;

ツール制作者に関するリンク

このサイトについて

サイトをご利用いただき、またツールを使っていただきありがとうございます。
このサイトは、フロントエンド開発を支援するためのツールを提供しているサイトです。
フロントエンド学習を効率的に進めたい方、CSSがよく分からないけど直感的にWebサイトのデザインを変更したい方、CSSには精通しているけどもっと感覚的にデザインやアニメーションをコーディングしたい方、など向けに制作しています。

制作するツールの選定

基本的に何かのツールを制作すると決めた時に、既に同じようなものがWeb上にある場合には、そちらを使っていただいた方が良いと考えています。
ただし同じようなものであっても、もっとこういった機能が欲しいと感じるものがあったり、UIを使いやすくできるのでは無いかと感じた場合に、新たに制作しています。

サイトの仕様について

このサイトのアクセスの比率はほとんどがPCです。その為、スマホやタブレットでの閲覧にも一応対応はしていますが、PCのUIのしやすさを最優先に設計されています。
基本的にはこのサイトへのアクセスも、生成されるコードの使用シーンの想定としても、ブラウザは Chrome, Firefox, Safari, Edge などのモダンブラウザです。ベンダープレフィックスの自動付与やレガシーブラウザへの対応はしておりません。

このサイトを作った経緯

Web上には以前からたくさんのフロントエンド開発の為の素晴らしいツールが存在していました。そして、自分自身フロントエンドを学び始めた時には様々なサイトにお世話になりました。
このサイトでも扱っているような「box-shadow」「text-shadow」「transform」「linear-gradient（グラデーション）」などのジェネレーターは、特に使わせていただいたと思います。
ただ、やはり日本語のツールが少なかったり、こんな機能が欲しいというものが無い場合がありました。そんな時、日本語にも対応していて、自分の欲しい機能が搭載されているツールを作りたいと思ったのがきっかけです。
当時の自分のように、勉強をし始めた方や、直感的に自分の表現を実現したいと思っている方に届けば良いなと思います。