transform 2D / 3D ジェネレーター
直感的な操作でtrasnsform(変形)の実行結果をシミュレートする為のツールです。
translate(移動), rotate(回転), scale(拡大・縮小), skew(歪み)を2D/3D方向に直感的に操作可能!transform-origin(回転軸), perspective(パース・視点), perspective-origin(消失点)にも対応しています。
また、対象要素や元となるX,Y,Z軸を視覚的に表示可能です
.original-transform {}
ツールを使用するにあたっての注意
- 基本的にCSSはリセットされている前提で、コードを出力していますのであらかじめご了承ください。
- ブラウザやサイト・お使いのCSSフレームワークによってはプレビューと異なる結果で表示されることがあります。表示結果が異なってしまう場合は、ブラウザの検証ツール(デベロッパーツール)などをお使いいただき、CSSプロパティが競合してしまっていないかなどを確認してください。
- 当ツールはモダンブラウザを考慮した設計になっており、Internet Explorerや古いバージョンのブラウザに対応しない場合がありますので、ご注意ください
ツールの使い方について
・ツールの使い方が今いち分からない
・色々な活用の方法を知りたい
・各項目の詳細を知りたい
という方の為に、内容や特徴の紹介と使い方を説明した動画を用意しました。
ご活用ください。
ジェネレーターの一覧
CSS グラデーション ジェネレーター
背景にグラデーションをかけるための、ジェネレーターです。
基本的な(線形)グラデーションのlinear-gradient、radial-gradient(円形)、conic-gradient(扇形)などに対応し、直感的にグラデーションを生成することができます。
複数のグラデーションの指定にも対応している為、重なり順が上のグラデーションの指定色を透過させる事で、複数のグラデーションを混ぜた色を生成することも可能です。
円形・扇形グラデーションにおいては、中心位置を直感的に操作するためのツールを用意している他、線形・扇形グラデーションの角度(deg)を直感的に操作することができる機能も搭載しています。
グラデーションの繰り返しにも対応しています。
また、70種類以上のサンプルから選択しカスタマイズできます!ボタンジェネレーター
直感的におしゃれなボタンを作ることができる、高機能自動ボタン生成ツールです。
背景色・背景グラデーション・ボタンの影(box-shadow)・文字の影(text-shadow)・サイズ(横幅、縦幅)・枠線(border)・角丸(border-radius)・transition(アニメーション)などに対応しています。
擬似要素(before, after)やマウスホバー(hover)、マウスホバー後の擬似要素にも対応しているので、様々なデザインのボタンを生成することが可能です
サンプルも20種類以上を用意しています!Box Shadow ジェネレーター
画像や要素などに影をつけることができる、box-shadowのツールです。
豊富なサンプルから選択し、カスタマイズすることができます。
内側の影(inset)や、複数の影の生成にも対応。beforeやafterなどの擬似要素にも対応しています。
ニューモフィズムのサンプルも用意しています。text-shadow ジェネレーター
文字に様々な影をつけることができる、text-shadowの自動生成ツールです。
豊富なサンプルから選択し、カスタマイズすることができます。
テキストのリアルタイム変更や、複数の影にも対応し色々なデザインを試すことができます。CSS border ジェネレーター
枠線をつけるためのCSS自動生成ツールです。
上下左右に個別に指定が出来る他、点線(dotted)・破線(dashed)・二重線(double)・立体的な線(groove / ridge / isnet / outset)なども生成することができます。プレビューのサイズ(横幅・縦幅)や角丸(border-radius)の指定も可能です!CSS filter ジェネレーター
画像や要素にエフェクトを簡単に実装できる、css filterのツールです。
ぼかし(blur)・明るさ(brightness)・コントラスト(contrast)・グレースケール(grayscale)・色相回転(hue-rotate)・反転(invert)・彩度(saturate)・セピア(sepia)・影(drop-shadow)などを複数指定することができます。
どのように活用したらいいか分からない方向けに、css filterのサンプルを用意
また、複数のサンプル画像やHTML要素をプレビューとして切り替えられる他、お持ちの画像を一時的にアップロードしてプレビューすることも可能です!CSS 三角形 ジェネレーター
HTMLとCSSのみで三角形(triangle)をつくるためのジェネレーターです。
CSSのborderを利用することにより矢印を自動生成します。上下左右以外にも360度全ての方向が指定可能!
正三角形を自動計算するための機能を搭載している他、色も自由に変更が可能です。
吹き出しやフローチャートなどでご活用ください。CSS backdrop-filter ジェネレーター
指定した要素の背面にエフェクトを実装できる、backdrop-filterのツールです。
ぼかし(blur)・明るさ(brightness)・コントラスト(contrast)・グレースケール(grayscale)・色相回転(hue-rotate)・反転(invert)・彩度(saturate)・セピア(sepia)・影(drop-shadow)などを複数指定することができます。
どのように活用したらいいか分からない方向けに、css filterのサンプルを用意
また、複数のサンプル画像やHTML要素をプレビューとして切り替えられる他、お持ちの画像を一時的にアップロードしてプレビューすることも可能です!transform 2D / 3D ジェネレーター
直感的な操作でtrasnsform(変形)の実行結果をシミュレートする為のツールです。
translate(移動), rotate(回転), scale(拡大・縮小), skew(歪み)を2D/3D方向に直感的に操作可能!transform-origin(回転軸), perspective(パース・視点), perspective-origin(消失点)にも対応しています。
また、対象要素や元となるX,Y,Z軸を視覚的に表示可能ですCSS transition ジェネレーター
簡単なアニメーションの為のtransition(トランジション)のジェネレーターです。
イージング(easing)や時間(duration)・遅延(delay)などにも対応!サンプルから選択して、編集可能です。アニメーション前後のスタイルを細かく設定できるので、transitionのシミュレーションとしてお使いいただけます。
また、アニメーションの逆再生や再生速度も変更可能。途中で停止したり任意の経過時間における要素の状態をシミュレートすることも出来ます。CSS animation ジェネレーター
CSSアニメーションの為のツールです。イージング(easing)や時間(duration)・遅延(delay)などにも対応!
その他ツールの一覧
フロントエンド学習に行き詰まってる方、もっと深く知りたい方へ
- フリーランスとして生きていきたい。
- 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(X軸方向の縮尺比率, Y軸方向の縮尺比率)
- scaleX(X軸方向の縮尺比率)
- scaleY(Y軸方向の縮尺比率)
- scaleZ(Z軸方向の縮尺比率)
- scale3d(X軸方向の縮尺比率, Y軸方向の縮尺比率, Z軸方向の縮尺比率)
- rotate(回転角度)
- rotate3d(X軸を軸とする回転角度, Y軸を軸とする回転角度, Z軸を軸とする回転角度, 回転角度)
- rotateX(X軸を軸とする回転角度)
- rotateY(Y軸を軸とする回転角度)
- rotateZ(Z軸を軸とする回転角度)
- 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(グラデーション)」などのジェネレーターは、特に使わせていただいたと思います。
ただ、やはり日本語のツールが少なかったり、こんな機能が欲しいというものが無い場合がありました。そんな時、日本語にも対応していて、自分の欲しい機能が搭載されているツールを作りたいと思ったのがきっかけです。
当時の自分のように、勉強をし始めた方や、直感的に自分の表現を実現したいと思っている方に届けば良いなと思います。