Roll

롤

The camera rotates around the lens axis, turning the image sideways.

···
html
<div class='frame'><div class='mask'><div class='shot'><div class='floor'></div><div class='wall'><i></i><i></i><i></i></div><div class='horizon'></div><b>ROLL</b></div></div><div class='axis'>LENS AXIS <i></i></div></div>
css
.frame{position:absolute;inset:0;overflow:hidden;background:var(--bg)}
.mask{position:absolute;inset:8% 12% 23%;overflow:hidden;border:1px solid var(--line);background:#bdd5ce}
.shot{position:absolute;inset:-14%;background:linear-gradient(180deg,#b8d5cf 0 55%,#d9c79b 55%);animation:roll 4s ease-in-out infinite}
.floor{position:absolute;left:-10%;right:-10%;bottom:-16%;height:50%;background:repeating-linear-gradient(0deg,rgba(255,255,255,.22) 0 1px,transparent 1px 20px);transform:perspective(140px) rotateX(38deg)}
.wall{position:absolute;left:10%;right:10%;top:10%;height:44%;display:flex;justify-content:space-around;border:2px solid var(--surface)}
.wall i{width:2px;height:100%;background:rgba(255,255,255,.6)}
.horizon{position:absolute;left:0;right:0;top:55%;height:2px;background:var(--accent)}
.shot>b{position:absolute;left:7%;top:7%;font:800 clamp(14px,4vmin,25px) ui-monospace,monospace;letter-spacing:.16em;color:var(--fg)}
.axis{position:absolute;left:8%;right:8%;bottom:8%;display:flex;align-items:center;justify-content:center;gap:9px;color:var(--muted);font:700 clamp(7px,1.8vmin,10px) ui-monospace,monospace;letter-spacing:.11em}
.axis i{width:9px;height:9px;border:2px solid var(--accent);border-radius:50%}
@keyframes roll{0%,8%{transform:rotate(-28deg) scale(1.14)}52%{transform:rotate(28deg) scale(1.14)}92%,100%{transform:rotate(-28deg) scale(1.14)}}

Tilt your head sideways and the floor and wall lines lean with it. A roll rotates the camera around the axis pointing through the lens.

Turn a roll-capable tripod head or keyframe rotation on the virtual camera's lens axis. Tilt the frame and scene together; use a floor or window edge to make the change visible when the horizon is absent.

A pan or tilt changes the viewing direction left-right or up-down; a roll turns the image sideways. Large rotations can disorient viewers, so use them for a clear reason.

When to use

Use it to unsettle the viewer or create a deliberately tilted point of view. Avoid it, or keep it slight, when level information matters.

Open as page ↗

Suggest an entry

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