Mission 9: Holographic Stabilization
The tactical map on the bridge's holographic display is misaligned after a power surge.
00:00
Mission Objective
Apply a `transform` to rotate the `#tactical-map` element by `-15deg` to straighten it.
Step 1 / 3
System Briefing: Manipulating Space
Technician, sometimes you need to move, rotate, or scale an interface element without affecting the document's flow or layout. The transform property lets you modify the coordinate space of an element, changing its shape and position.
2D Transforms
These functions modify an element on a 2D plane.
translate(x, y): Moves an element horizontally and vertically.rotate(angle): Rotates an element. (e.g.,rotate(45deg))scale(x, y): Resizes an element.scale(1.5)makes it 50% larger.skew(x-angle, y-angle): Tilts an element along its axes.
3D Transforms
To work in 3D, you must first establish a "perspective" on a parent element. This defines how "deep" the 3D space is.
.container {
perspective: 800px;
}
.element-inside {
transform: rotateY(45deg) translateZ(150px);
}
rotateX(angle),rotateY(angle),rotateZ(angle): Rotates an element around the specified 3D axis.translateZ(distance): Moves an element closer or further from the viewer.