Transform and opacity

Transform and opacity are the two CSS properties you should reach for first when animating the UI. Unlike properties such as top, width, or margin, transforms and opacity are composited on the GPU — they animate without triggering layout recalculation, producing smooth 60 fps animations even on complex pages.

Transform functions

The transform property accepts one or more transformation functions applied in sequence.

translate

Moves the element from its current position without affecting document flow. Other elements do not shift to fill the gap — translate is purely visual.

transform: translate(24px, -8px);   /* right 24px, up 8px */
transform: translateX(50%);          /* right 50% of element's own width */
transform: translateY(-100%);        /* up 100% of element's own height */

translate is the preferred way to animate position (instead of top/left), because it does not trigger layout.

scale

Scales the element up or down from its transform-origin point.

transform: scale(1.05);     /* 5% larger */
transform: scale(0.9);      /* 10% smaller */
transform: scaleX(1.2);     /* wider only */

Scale values are multipliers: 1 is the original size, 2 is double, 0.5 is half.

rotate

Rotates the element around its transform-origin.

transform: rotate(45deg);    /* clockwise */
transform: rotate(-10deg);   /* counter-clockwise */

skew

Distorts the element along the X or Y axis, creating a slanted appearance.

transform: skewX(-10deg);
transform: skew(5deg, 3deg);

Combining transforms

Multiple transform functions can be chained on a single transform declaration:

transform: translateY(-4px) scale(1.02);

Order matters: transforms are applied right to left. translate then rotate produces a different result than rotate then translate.

transform-origin

transform-origin sets the reference point around which rotation and scaling happen. The default is 50% 50% (the center of the element).

transform-origin: top left;      /* rotate from top-left corner */
transform-origin: center bottom; /* scale from the bottom edge */
transform-origin: 20px 80%;      /* custom point */

Changing transform-origin is what gives a flip card its hinge, or makes a button scale from its left edge rather than its center.

3D transforms

Site Designer supports 3D transform functions for depth effects:

• rotateX(deg) — tilt forward or back
• rotateY(deg) — flip left or right
• perspective(px) — set the viewer distance (lower value = more extreme perspective)

For 3D transforms to look correct, set perspective on the parent element, not on the transformed element itself:

.scene { perspective: 800px; }
.card { transform: rotateY(15deg); }

Opacity

opacity sets how transparent an element is, from 0 (completely invisible) to 1 (fully visible).

Opacity vs. RGBA background

These are not the same:

• opacity: 0.5 makes the entire element semi-transparent — background, borders, text, images, and all child elements.
• background-color: rgba(0, 0, 0, 0.5) makes only the background semi-transparent. Text and child elements remain fully opaque.

Use RGBA when you want a transparent background with opaque content. Use opacity when you want the whole element to fade.

Opacity and stacking contexts

Any element with opacity less than 1 creates a new CSS stacking context (see Overflow and z-index). This affects how z-index behaves on child elements.

will-change: transform

will-change: transform is a hint to the browser that this element will be animated, so it should be promoted to a GPU compositing layer in advance. This can eliminate the brief jank at the start of an animation.

.animated-card {
  will-change: transform;
}