The Transform block moves, scales, rotates, and skews elements in 2D or 3D, with a 3D toggle that switches transform-style to preserve-3d.
Where: Right sidebar → Layout & Transform → Transform block — Select an element and expand Transform
Key ideas
- 2D defaults: Rotate is a standalone CSS property (deg/rad/turn). Add translate/scale/skew rows from the + menu.
- 3D mode: The header toggle switches transform-style flat↔preserve-3d and reveals Translate (X/Y/Z), Rotate X/Y/Z, and Scale (X/Y/Z) rows.
- Layer rows: Add draggable transform functions: translate/translate3d/translateX-Y-Z, rotate/rotateX-Y-Z/rotate3d, scale/scale3d, skew/skewX/skewY, matrix/matrix3d.
- Perspective & origin: Optional transform-origin, perspective (default 800px), perspective-origin, and backface-visibility.
Steps
- Select an element and open the Transform block in Layout & Transform.
- Adjust Rotate, or use + to add Translate/Scale/Skew rows.
- Click the 3D toggle to enable preserve-3d and reveal X/Y/Z rows.
- Add Perspective and transform-origin from the + menu for 3D depth.
Shared scope and website-only layout defaults
Use the selector builder in Pick a class for combined authored classes and ancestor context. Position, Layout, advanced Typography, and floating composite controls expose consistent scope/reset actions. All pages targets page-frame rules even without a user class. Website pages default to a flex column; video compositions and ad variations retain their own layout behavior.