How to rotate, scale and move elements (Transforms)

In TeleportHQ, the Transforms section of the right panel rotates, scales, slants and shifts an element without changing the layout around it. Select the element, open Transforms, and set Rotate, Scale, Skew or Translate X and Translate Y. For example, tilt a "New!" badge by 12 degrees, or make a card grow slightly when hovered.

Before you start#

• Transforms are available on every plan.
• A transform changes how the element looks, not the space it takes up. Elements around it don't move.

Steps#

1. On the canvas, click the element, for example a "New!" badge.
2. In the right panel, open the Visual tab.
3. Scroll down to Transforms, near the end of the panel after Backdrop Filter. Click the arrow at the right of its title to open it.
4. Set the transform you want:
   • Translate X and Translate Y: shift the element right or down, for example 20px. Use negative numbers to shift left or up.
   • Rotate: drag the dial or type an angle, for example 12deg. Use a negative number, such as -12deg, to turn the other way.
   • Skew: drag in the pad, or type X and Y angles, for example 10deg. Dragging in the pad goes up to 45 degrees.
   • Scale: type a size multiplier, for example 1.1 for 10% bigger or 0.9 for 10% smaller.
5. In Origin, pick the point the element rotates and scales around, for example top left. The default is center.

Check that it worked#

The element on the canvas turns, grows or shifts. The elements around it stay in place.

Make an element grow on hover#

1. Select the element, for example a product card.
2. In States, click + and choose hover.
3. In Transforms, set Scale to 1.05.
4. Near the bottom of the canvas, click the hover button on the State: bar to stop editing the hover look.
5. Click Preview in the bottom toolbar and point at the card. It grows smoothly: adding the first state also gives the element a 0.3-second transition, unless it already has one.

See How to add hover and click effects.

Use 3D transforms#

1. In Transforms, tick Enable 3D. Rotate is replaced by Rotate X, Rotate Y and Rotate Z.
2. Set Rotate X, Rotate Y or Rotate Z, for example Rotate Y 180deg to flip a card.
3. Set Translate Z to move the element toward or away from the viewer.
4. Set Perspective to control the depth effect. A smaller value, such as 600px, looks more dramatic. The default is 1000px.

Troubleshooting#

The rotated element overlaps other elements Transforms don't make room for the element. Add margin around it, or set Overflow to hidden on its container in Size.

Scale only takes one number Scale grows or shrinks the element evenly in every direction. The Transforms section can't stretch an element in only one direction. To make it wider or taller, change Width or Height in Size instead.

I can't see the Transforms fields The Transforms section starts closed when it has no values. Click the arrow at the right of its title.

The Transforms values show in grey The transform comes from a CSS class or a larger screen size. Type a value to override it on this element. See How the style panel works.

Good to know#

• Transforms can be set per screen size and per interaction state, like other styles.
• To move an element to a new place in the layout, use Position instead. See How to position elements.
• For movement that plays when an element scrolls into view, see Which animation options does TeleportHQ have?.