CSS Transform Explorer — translate / rotate / scale / skew を 2D/3D スライダーで即調整【Webツール】

■ このツールについて

CSS Transform Explorer は、translate・rotate・scale・skew などのCSS transform プロパティをリアルタイムスライダーで調整し、生成されたCSSをコピーできるブラウザ完結型ツールです。2D/3Dモード切替、transform-origin 9点グリッドに対応。

■ 主な機能

✓ translateX/Y・rotate・scaleX/Y・skewX/Y を個別スライダーで調整

✓ 3Dモード：translateZ・rotateX/Y・perspective を追加調整

✓ transform-origin を9点グリッドでビジュアル設定

✓ 非デフォルト値を teal でハイライト表示

✓ リアルタイムプレビューで変形結果を即確認

✓ 生成CSSをワンクリックでコピー

■ 使い方

1. 下記URLをブラウザで開く

https://devtools-hub.vercel.app/tools/css-transform-explorer

2. スライダーで各 transform 値を調整

3. プレビューを確認してCSSをコピー

■ 動作環境

・ブラウザ：Chrome / Firefox / Safari / Edge（最新版推奨）

・インストール不要、アカウント登録不要

■ 収録ファイル

・README.txt（Web ツール URL 記載）

■ ライセンス

個人・商用問わず使用可

Copyright (c) 2026 KOMA