We use cookies to enhance your experience on the site
CSS Transform - 2D and 3D transformations
Welcome back to the Valley of the Kings! Just as the ancient Egyptians could transform simple stone into majestic sculptures of gods, in CSS we can transform elements - move, rotate, scale, and skew them in 2D and 3D space. Transform is the key to creating modern, dynamic interfaces!
What is Transform?
Transform allows for geometric transformation of an element without affecting the layout of other elements. The element is transformed visually, but its original space in the document remains unchanged.
Key advantage: Transform is GPU-accelerated, meaning extremely high performance!
1.element {
2 /* Element moves, but doesn't affect other elements */
3 transform: translateX(100px);
4}Egyptian analogy: It's like a pyramid's shadow - the pyramid stays in its place, but its shadow moves depending on the sun.
Transform 2D - basic functions
1. Translate - moving
1/* Move horizontally */
2.element {
3 transform: translateX(100px); /* Right by 100px */
4 transform: translateX(-50px); /* Left by 50px */
5}
6
7/* Move vertically */
8.element {
9 transform: translateY(50px); /* Down by 50px */
10 transform: translateY(-30px); /* Up by 30px */
11}
12
13/* Move in both directions */
14.element {
15 transform: translate(100px, 50px); /* X, Y */
16}
17
18/* Percentages relative to element size */
19.element {
20 transform: translate(50%, -100%);
21 /* 50% of its width to the right */
22 /* 100% of its height upward */
23}Practical use - centering:
1.center {
2 position: absolute;
3 top: 50%;
4 left: 50%;
5 transform: translate(-50%, -50%); /* Perfect center! */
6}2. Scale - scaling
1/* Enlarge 2x */
2.element {
3 transform: scale(2); /* 200% of size */
4}
5
6/* Shrink to half */
7.element {
8 transform: scale(0.5); /* 50% of size */
9}
10
11/* Different scales in X and Y */
12.element {
13 transform: scale(2, 0.5); /* 2x width, 0.5x height */
14}
15
16/* Only X or only Y */
17.element {
18 transform: scaleX(1.5); /* Stretch horizontally */
19 transform: scaleY(0.8); /* Compress vertically */
20}
21
22/* Mirror reflection */
23.element {
24 transform: scaleX(-1); /* Flip horizontal */
25 transform: scaleY(-1); /* Flip vertical */
26 transform: scale(-1, -1); /* Flip both */
27}Practical example - zoom on hover:
1.card {
2 transition: transform 0.3s ease;
3}
4
5.card:hover {
6 transform: scale(1.05); /* Subtle zoom */
7}3. Rotate - rotation
1/* Rotation in degrees */
2.element {
3 transform: rotate(45deg); /* 45 degrees clockwise */
4 transform: rotate(-90deg); /* 90 degrees counterclockwise */
5 transform: rotate(180deg); /* 180 degree rotation */
6}
7
8/* Rotation in radians */
9.element {
10 transform: rotate(1.57rad); /* ~90 degrees */
11}
12
13/* Rotation in turns (full rotations) */
14.element {
15 transform: rotate(0.5turn); /* Half turn (180 degrees) */
16 transform: rotate(2turn); /* 2 full rotations (720 degrees) */
17}Practical example - loading spinner:
1.spinner {
2 width: 40px;
3 height: 40px;
4 border: 4px solid #f3f3f3;
5 border-top: 4px solid goldenrod;
6 border-radius: 50%;
7 animation: spin 1s linear infinite;
8}
9
10@keyframes spin {
11 from {
12 transform: rotate(0deg);
13 }
14 to {
15 transform: rotate(360deg);
16 }
17}4. Skew - skewing
1/* Skew horizontally */
2.element {
3 transform: skewX(15deg); /* Skew right */
4 transform: skewX(-15deg); /* Skew left */
5}
6
7/* Skew vertically */
8.element {
9 transform: skewY(10deg);
10}
11
12/* Skew in both directions */
13.element {
14 transform: skew(15deg, 10deg); /* X, Y */
15}Practical example - parallelogram button:
1.skew-button {
2 transform: skewX(-10deg);
3 background: goldenrod;
4 padding: 12px 30px;
5 color: white;
6 border: none;
7 font-weight: bold;
8}
9
10.skew-button span {
11 display: inline-block;
12 transform: skewX(10deg); /* Un-skew the text */
13}Combining transformations
You can combine multiple transformations in a single declaration:
1.element {
2 /* Order matters! */
3 transform: translate(100px, 50px) rotate(45deg) scale(1.5);
4
5 /* This is not the same as: */
6 transform: rotate(45deg) translate(100px, 50px) scale(1.5);
7}Important: Transformations are executed from right to left (from end to beginning)!
Practical example - complex animation:
1.card {
2 transition: transform 0.5s ease;
3}
4
5.card:hover {
6 transform: translateY(-10px) /* First, move up */
7 rotate(2deg) /* Then slight rotation */
8 scale(1.05); /* Finally, zoom */
9}Transform-origin - reference point
Transform-origin specifies the point around which transformations occur:
1/* Default */
2.element {
3 transform-origin: 50% 50%; /* Center (center center) */
4}
5
6/* Different points */
7.element {
8 transform-origin: top left; /* Top left corner */
9 transform-origin: bottom right; /* Bottom right corner */
10 transform-origin: center; /* Center */
11 transform-origin: 0 0; /* Top left (px) */
12 transform-origin: 100% 0; /* Top right */
13}Example - rotation around different points:
1.door-left {
2 transform-origin: left center;
3 transition: transform 0.5s;
4}
5
6.door-left:hover {
7 transform: rotateY(90deg); /* Rotation around left edge */
8}
9
10.door-right {
11 transform-origin: right center;
12 transition: transform 0.5s;
13}
14
15.door-right:hover {
16 transform: rotateY(-90deg); /* Rotation around right edge */
17}Transform 3D
3D transformations add depth and perspective:
Perspective
Perspective must be set on the parent of 3D elements:
1.container {
2 perspective: 1000px; /* The larger the value, the less perspective */
3}
4
5.child {
6 transform: rotateY(45deg); /* Now you can see the 3D effect */
7}Or on the element itself:
1.element {
2 transform: perspective(1000px) rotateY(45deg);
3}3D Rotations
1/* Rotation around X axis (front-back) */
2.element {
3 transform: rotateX(45deg);
4}
5
6/* Rotation around Y axis (left-right) */
7.element {
8 transform: rotateY(45deg);
9}
10
11/* Rotation around Z axis (normal 2D rotation) */
12.element {
13 transform: rotateZ(45deg); /* Same as rotate(45deg) */
14}
15
16/* Rotation around a custom 3D axis */
17.element {
18 transform: rotate3d(1, 1, 0, 45deg); /* x, y, z, angle */
19}3D Translations
1/* Move in depth/forward */
2.element {
3 transform: translateZ(100px); /* Forward */
4 transform: translateZ(-100px); /* Backward */
5}
6
7/* 3D translate */
8.element {
9 transform: translate3d(100px, 50px, 200px); /* X, Y, Z */
10}Transform-style and Backface-visibility
1.container {
2 /* Preserve 3D for children */
3 transform-style: preserve-3d;
4
5 /* Or flatten to 2D */
6 transform-style: flat;
7}
8
9.card {
10 /* Hide the back face of the element */
11 backface-visibility: hidden;
12
13 /* Or show it */
14 backface-visibility: visible;
15}Practical 3D examples
1. Flip card
1<div class="flip-card">
2 <div class="flip-card-inner">
3 <div class="flip-card-front">
4 <h3>Front</h3>
5 </div>
6 <div class="flip-card-back">
7 <h3>Back</h3>
8 </div>
9 </div>
10</div>1.flip-card {
2 width: 300px;
3 height: 400px;
4 perspective: 1000px;
5}
6
7.flip-card-inner {
8 width: 100%;
9 height: 100%;
10 transition: transform 0.6s;
11 transform-style: preserve-3d;
12 position: relative;
13}
14
15.flip-card:hover .flip-card-inner {
16 transform: rotateY(180deg);
17}
18
19.flip-card-front,
20.flip-card-back {
21 position: absolute;
22 width: 100%;
23 height: 100%;
24 backface-visibility: hidden;
25 display: flex;
26 align-items: center;
27 justify-content: center;
28 border-radius: 10px;
29}
30
31.flip-card-front {
32 background: #3498db;
33 color: white;
34}
35
36.flip-card-back {
37 background: goldenrod;
38 color: white;
39 transform: rotateY(180deg);
40}2. 3D Cube
1<div class="cube-container">
2 <div class="cube">
3 <div class="cube-face front">Front</div>
4 <div class="cube-face back">Back</div>
5 <div class="cube-face right">Right</div>
6 <div class="cube-face left">Left</div>
7 <div class="cube-face top">Top</div>
8 <div class="cube-face bottom">Bottom</div>
9 </div>
10</div>1.cube-container {
2 width: 200px;
3 height: 200px;
4 perspective: 800px;
5}
6
7.cube {
8 width: 100%;
9 height: 100%;
10 position: relative;
11 transform-style: preserve-3d;
12 transition: transform 1s;
13 animation: rotate-cube 10s infinite linear;
14}
15
16.cube-face {
17 position: absolute;
18 width: 200px;
19 height: 200px;
20 display: flex;
21 align-items: center;
22 justify-content: center;
23 font-size: 24px;
24 font-weight: bold;
25 color: white;
26 opacity: 0.9;
27}
28
29.front { background: #3498db; transform: translateZ(100px); }
30.back { background: #e74c3c; transform: translateZ(-100px) rotateY(180deg); }
31.right { background: #2ecc71; transform: rotateY(90deg) translateZ(100px); }
32.left { background: #f39c12; transform: rotateY(-90deg) translateZ(100px); }
33.top { background: #9b59b6; transform: rotateX(90deg) translateZ(100px); }
34.bottom { background: #1abc9c; transform: rotateX(-90deg) translateZ(100px); }
35
36@keyframes rotate-cube {
37 from {
38 transform: rotateX(0deg) rotateY(0deg);
39 }
40 to {
41 transform: rotateX(360deg) rotateY(360deg);
42 }
43}3. 3D Button push effect
1.button-3d {
2 background: goldenrod;
3 color: white;
4 padding: 15px 30px;
5 border: none;
6 font-size: 18px;
7 font-weight: bold;
8 cursor: pointer;
9 transform: translateZ(0);
10 transition: transform 0.1s;
11 box-shadow: 0 6px 0 #d4920a;
12}
13
14.button-3d:hover {
15 transform: translateY(-2px);
16 box-shadow: 0 8px 0 #d4920a;
17}
18
19.button-3d:active {
20 transform: translateY(4px);
21 box-shadow: 0 2px 0 #d4920a;
22}Performance Tips
GPU-accelerated (FAST):
- transform (all functions)
- opacity
CPU-bound (SLOW):
- left, top, right, bottom
- width, height
- margin, padding
Best Practices:
1/* Slow - causes reflow */
2.element:hover {
3 width: 300px;
4 left: 100px;
5}
6
7/* Fast - GPU-accelerated */
8.element:hover {
9 transform: translateX(100px) scaleX(1.5);
10}
11
12/* Force GPU acceleration */
13.element {
14 transform: translateZ(0); /* GPU trick */
15 /* or */
16 will-change: transform; /* Inform the browser */
17}Summary
Transform 2D:
- translate - moving (X, Y)
- scale - scaling
- rotate - rotation
- skew - skewing
Transform 3D:
- perspective - scene depth
- rotateX, rotateY, rotateZ - 3D rotations
- translateZ - moving in depth/forward
- transform-style: preserve-3d - preserving 3D
- backface-visibility - hiding the back face
Key principles:
- Transform does NOT affect layout
- GPU-accelerated = very fast
- The order of transformations matters
- Transform-origin controls the reference point
- Combine with transition for smooth animations
Remember: Transform is like the magical spells of Egyptian priests - they can transform reality without changing its essence!