HF MotionA humanfriend.digital product
Angle + pivot reveal

Rotate

Use subtle tilts, dramatic editorial rotations, and hinge-style origins while fading into place.

Open playground
ROTATE
Default angle6°
Final angle0°
Origincenter center
Live demo

Rotate reveal

Pivots from -12 degrees around the bottom-left corner.

Rotate revealdata-hf="rotate" data-hf-set="dramatic"
Want to see that again? scroll up or down out of viewport and come back Customize it

Rotate reveals fade while rotating from a configurable starting angle to 0 degrees. Transform origin strongly affects the result.

<div class="hf-rotate-in" data-hf-once="false">Replays on re-entry</div>

Minimal

<div class="hf-rotate-in">Content</div>

Default behavior: starts at 6 degrees, pivots around center center, and fades into place.

Fully Customized Rotate

<div
data-hf="rotate"
data-hf-rotate="-12"
data-hf-origin="bottom left"
data-hf-direction="bottom"
data-hf-distance="36"
data-hf-duration="950"
data-hf-easing="cubic-bezier(0.16, 1, 0.3, 1)"
>
Editorial card reveal
</div>

Rotation Guidance

Angle Character Use
2-4 degrees Subtle Cards and labels
5-8 degrees Noticeable Images and editorial blocks
9-15 degrees Dramatic Hero graphics and posters
Negative angle Opposite tilt Alternating layouts and asymmetric grids

  • Use bottom left or bottom right origin to make a card appear hinged.

  • Use center center for a balanced rotation.

  • Large angles can feel playful rather than premium.