CSS トランスフォーム生成ツール
translate、rotate、scale、skewを組み合わせたCSS transform宣言を生成し、貼り付け可能な1つのショートハンドにします。
入力
出力
このツールを使う他の方法
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-transform-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"translateX": "10",
"translateY": "20",
"rotate": "45",
"scaleX": "1.5",
"scaleY": "1.5",
"skewX": "0",
"skewY": "0"
}'ご自身のアカウントのキーに差し替えてください。ツールのフィールドがそのままリクエストボディになります——ラッパーはありません。
AIエージェントに依頼する
Use the IOTools `css-transform-generator` tool (CSS Transform Generator) on this input:
YOUR_INPUT_HEREIOTools MCPサーバーに接続された任意のエージェントにこれを貼り付け、入力内容を追加してください。
埋め込みウィジェット
<iframe
src="https://iotools.cloud/embed/css-transform-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="CSS トランスフォーム生成ツール — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>ご自身のページに貼り付けるだけ——無料、キー不要、リンクを掲載するだけです。
| API/MCP 1回あたりの費用 | 5クレジットから |
|---|---|
| クレジットが足りませんか? | 料金を見る |
次の方法でも利用可能
ガイド
機能
CSS トランスフォーム生成ツールは、translate、rotate、scale、skewの値を1つの貼り付け可能な transform: 宣言に組み合わせます。スライダーと数値フィールドを調整すると、生成されたCSSが即座に更新されます。関数の構文を手書きしたり、CSSが期待する順序を覚えたりする必要はありません。
トランスフォーム関数
CSS transform 宣言は、スペースで区切られた関数のリストであり、各関数は異なる方法で要素を変更します：
translate(x, y)— 要素をピクセル単位で水平および垂直に移動します。正のX値は右に移動し、正のY値は下に移動します。rotate(deg)— 要素をその原点（デフォルトでは中心）を中心に時計回りに回転させます。負の値は反時計回りに回転します。scale(x, y)— 各軸に沿って要素のサイズを変更します。1は元のサイズ、2は2倍、0.5は半分、負の値はその軸に沿って要素を反転させます。skew(x, y)— 要素を各軸に沿って度単位で傾斜させ、平行四辺形のような歪みを作成します。これはスタイリングされたヘッダーやカード効果に頻繁に使用されます。
関数の順序が重要
ブラウザはトランスフォーム関数を 記述された順序で適用 し、各関数は前の関数が残した座標系に対して動作します。このツールは常に固定の順序で記述します — translate、rotate、scale、skew — これはオフセット、回転、サイズ変更を組み合わせるための最も予測可能な順序です。特定の効果に異なる合成順序が必要な場合は、CSSをコピーした後、関数を手動で並べ替えてください。
出力を清潔に保つために、関数は実際に何かを変更する場合のみ含まれます。translate(0px, 0px)、rotate(0deg)、scale(1, 1)、skew(0deg, 0deg) はすべて無操作なため、省略されます。すべての値がデフォルトの場合、ツールは transform: none; を出力します。
使い方
- X方向の移動 と Y方向の移動 をピクセル単位で設定して要素を移動させます。
- 回転 をドラッグして回転させます（度数：-360～360）。
- X方向のスケール と Y方向のスケール を設定してサイズを変更します —
1は元のサイズを保ちます。 - X方向の傾斜 と Y方向の傾斜 をドラッグして傾斜させます（度数）。
- コード出力から生成された
transform宣言をコピーし、スタイルシートに貼り付けます。
よくある質問
scale がパーセンテージではなく通常の数値なのはなぜですか？
CSSの scale() 関数は単位のない乗数を使用します。パーセンテージではありません。1.5 は元のサイズの150%を意味し、0.5 は50%を意味します。生のCSS構文に一致させることで、変換なしで出力を直接貼り付けることができます。
このツールで作成したトランスフォームをアニメーション化できますか？
はい。transform はCSS transition/animation プロパティの一般的なターゲットです。それに並んで transition: transform 0.3s ease; ルールを追加します（基本状態または :hover に）値をアニメーション化できます。
translate/rotate/scale/skewの順序は視覚的な結果を変えますか？
はい。各関数は前の関数が残した座標系に対して動作するため、translate() その後 rotate() は rotate() その後 translate() とは異なる結果を生成します。このツールは固定の予測可能な順序を使用します。別の合成が必要な場合は、コピーしたCSSを手動で編集してください。
このツールは何かを保存またはアップロードしますか？ いいえ。すべての計算はブラウザでローカルに実行されます — 値がデバイスを離れることはありません。