Tilt

틸트

The camera angles up or down from a fixed position to shift the view.

···
html
<div class='frame'><div class='view'><div class='sky'></div><div class='tower'><i></i><i></i><i></i><b>TOP</b></div><div class='ground'></div><div class='sight'></div></div><div class='caption'>TILT · SAME POSITION</div></div>
css
.frame{position:absolute;inset:0;overflow:hidden;background:var(--bg)}
.view{position:absolute;inset:7% 8% 23%;overflow:hidden;border:1px solid var(--line);background:linear-gradient(180deg,#b9d5d0 0 48%,#d9c99f 48% 100%)}
.sky{position:absolute;inset:-12% 0 30%;background:linear-gradient(155deg,var(--accent-2),#d3e3d2);transform:translateY(28%);animation:sky 4s ease-in-out infinite}
.tower{position:absolute;left:43%;top:9%;width:18%;height:107%;background:var(--accent-3);clip-path:polygon(28% 0,72% 0,100% 100%,0 100%);animation:building 4s ease-in-out infinite}
.tower i{position:relative;display:block;margin:20% auto 0;width:35%;height:3px;background:var(--surface);opacity:.75}
.tower b{position:absolute;top:5%;left:20%;color:var(--surface);font:700 clamp(8px,2vmin,12px) ui-monospace,monospace}
.ground{position:absolute;inset:auto 0 0;height:31%;background:#7c8e69;transform:translateY(26%);animation:ground 4s ease-in-out infinite}
.sight{position:absolute;left:50%;top:49%;width:clamp(20px,10vmin,54px);height:2px;background:var(--surface);opacity:.65}
.caption{position:absolute;left:8%;bottom:7%;color:var(--muted);font:700 clamp(8px,2vmin,12px) ui-monospace,monospace;letter-spacing:.1em}
@keyframes sky{0%,8%{transform:translateY(28%)}52%{transform:translateY(-10%)}92%,100%{transform:translateY(28%)}}
@keyframes ground{0%,8%{transform:translateY(26%)}52%{transform:translateY(-19%)}92%,100%{transform:translateY(26%)}}
@keyframes building{0%,8%{transform:translateY(16%)}52%{transform:translateY(-7%)}92%,100%{transform:translateY(16%)}}

Imagine keeping your feet planted while tipping your head up to see a building's roof. The camera rotates vertically, so the horizon and visible parts of the building shift within the frame.

Keyframe the tripod's tilt axis or the virtual camera's pitch while keeping its center position and roll level. Looking upward can still make a building's vertical edges converge toward the top because of perspective.

A tilt changes the viewing direction; a pedestal changes camera height. Rotating the whole frame is a roll, so keep those moves distinct.

When to use

Use it to reveal a person's or structure's height or guide the viewer's gaze vertically. A long move can make the destination feel unclear.

Open as page ↗

Suggest an entry

Tell us about a film term or effect that’s missing. We review each suggestion.