CSS Transform ジェネレーター
スライダーで CSS transform 宣言を視覚的に構築。translate・rotate・scale・skew をリアルタイムプレビューで確認。
出力
transform: none; transform-origin: center;
.element {
transform: none;
transform-origin: center;
}transform: matrix(1, 0, 0, 1, 0, 0); transform-origin: center;
What Is the CSS Transform Generator?
The CSS transform generator lets you build and preview CSS transform declarations visually. Adjust sliders for translateX, translateY, rotate, scaleX, scaleY, skewX, and skewY — the live preview updates instantly.
The tool also outputs the equivalent matrix() form, which is useful when you need to encode the transformation programmatically or minimize the CSS string.
How to Use the CSS Transform Generator
- Drag the sliders to adjust any transform function. Active functions are highlighted in blue.
- Click a preset to jump to a common transformation (Flip H, Rotate 45°, Scale Up, Tilt, etc.).
- Pick a transform-origin from the 3×3 grid to control the pivot point.
- Click any active tag below the preview to reset that individual function.
- Copy the CSS declaration, full class block, or matrix() form.
Features
- 7 transform functions: translateX/Y (px), rotate (deg), scaleX/Y, skewX/Y (deg)
- Live preview with grid background for spatial reference
- 8 built-in presets: Flip H, Flip V, Rotate 45°/90°, Scale Up, Shrink, Tilt
- Visual 3×3 transform-origin picker with arrow indicators
- Outputs individual functions, full CSS block, and matrix() equivalent
- Active transform tags with one-click reset per function
FAQ
What CSS transform functions can I use?
CSS transform supports translateX, translateY, rotate, scaleX, scaleY, skewX, skewY, and their 3D variants. Multiple functions can be combined in one transform property, applied left-to-right.
What is transform-origin?
transform-origin sets the pivot point for transforms. The default is center (50% 50%). Setting it to top left makes rotations and scales originate from the top-left corner of the element.
What is the matrix() function in CSS transforms?
matrix(a, b, c, d, tx, ty) is a shorthand for a 2D affine transformation combining translate, rotate, scale, and skew into six values. It is useful for programmatic generation or when you want to encode all transforms in one concise declaration.
Does CSS transform affect layout?
No. CSS transform does not affect document flow — the element keeps its original layout space. It is GPU-composited, making it efficient for animations.