What Is CSS Transform?

The transform property lets you visually move, rotate, resize, and skew elements without disrupting document flow. Transforms are GPU-accelerated and animation-friendly — a cornerstone of modern UI effects.

CSS Transform Generator

Use the sliders below to compose a transform in real time. Hit Copy CSS when you are ready.

Presets:

Translate
0px
0px
  <div class="ctg-section-title">Rotate</div>
  <div class="ctg-row">
    <label for="ctg-rot">Rotate</label>
    <input type="range" id="ctg-rot" min="-360" max="360" value="0" step="1" oninput="ctgUpdate()">
    <span class="ctg-val" id="ctg-rot-val">0deg</span>
  </div>

  <div class="ctg-section-title">Scale</div>
  <div class="ctg-row">
    <label for="ctg-sx">Scale X</label>
    <input type="range" id="ctg-sx" min="0" max="3" value="1" step="0.01" oninput="ctgUpdate()">
    <span class="ctg-val" id="ctg-sx-val">1.00</span>
  </div>
  <div class="ctg-row">
    <label for="ctg-sy">Scale Y</label>
    <input type="range" id="ctg-sy" min="0" max="3" value="1" step="0.01" oninput="ctgUpdate()">
    <span class="ctg-val" id="ctg-sy-val">1.00</span>
  </div>

  <div class="ctg-section-title">Skew</div>
  <div class="ctg-row">
    <label for="ctg-skx">Skew X</label>
    <input type="range" id="ctg-skx" min="-60" max="60" value="0" step="1" oninput="ctgUpdate()">
    <span class="ctg-val" id="ctg-skx-val">0deg</span>
  </div>
  <div class="ctg-row">
    <label for="ctg-sky">Skew Y</label>
    <input type="range" id="ctg-sky" min="-60" max="60" value="0" step="1" oninput="ctgUpdate()">
    <span class="ctg-val" id="ctg-sky-val">0deg</span>
  </div>

  <div class="ctg-section-title">Perspective</div>
  <div class="ctg-perspective-row">
    <input type="checkbox" id="ctg-persp-en" onchange="ctgUpdate()">
    <label for="ctg-persp-en">Enable perspective</label>
  </div>
  <div class="ctg-row">
    <label for="ctg-persp">Perspective</label>
    <input type="range" id="ctg-persp" min="100" max="2000" value="600" step="10" oninput="ctgUpdate()">
    <span class="ctg-val" id="ctg-persp-val">600px</span>
  </div>
</div>

<div class="ctg-preview-panel">
  <div>
    <div class="ctg-preview-label">Live Preview</div>
    <div class="ctg-preview-box">
      <div class="ctg-subject" id="ctg-subject">Box</div>
    </div>
  </div>
  <div>
    <div class="ctg-preview-label">Generated CSS</div>
    <div class="ctg-output" id="ctg-output">
      <span class="ctg-prop">transform</span>: <span class="ctg-val-text">none</span>;
    </div>
  </div>
  <div class="ctg-btn-row">
    <button class="ctg-btn ctg-btn-primary" onclick="ctgCopy()">Copy CSS</button>
    <button class="ctg-btn ctg-btn-secondary" onclick="ctgApplyPreset('reset')">Reset All</button>
  </div>
  <div class="ctg-copy-notice" id="ctg-copy-notice"></div>
</div>

Transform Functions Explained

FunctionSyntaxDescription
translate()translate(x, y)Move element along X and Y axes
rotate()rotate(deg)Rotate clockwise (positive) or counter-clockwise (negative)
scale()scale(x, y)Resize element; 1 = original, -1 = flip
skew()skew(xdeg, ydeg)Tilt element along each axis
perspective()perspective(px)Add 3D depth for child transforms

Multiple Transforms — Order Matters

Transforms are applied right to left. translate(50px, 0) rotate(45deg) first rotates then moves, producing a different result than the reversed order.

Performance Tips

  • Use transform (and opacity) for animations — they skip layout and paint steps.
  • Add will-change: transform on elements that animate frequently.
  • Avoid transform on elements that are rarely updated — will-change reserves GPU memory.

3D Transforms Quick Reference

/* Parent sets the 3D space */
.container {
  perspective: 600px;
}

/* Child uses 3D functions */
.card {
  transform: rotateY(30deg) rotateX(10deg);
  transform-style: preserve-3d;
  backface-visibility: hidden;
}