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:

1. Transform does NOT affect layout
2. GPU-accelerated = very fast
3. The order of transformations matters
4. Transform-origin controls the reference point
5. Combine with transition for smooth animations

1* {
2  margin: 0;
3  padding: 0;
4  box-sizing: border-box;
5}
6
7body {
8  font-family: 'Segoe UI', sans-serif;
9  background: linear-gradient(180deg, #1a0a2e, #3d2914);
10  min-height: 100vh;
11  display: flex;
12  justify-content: center;
13  align-items: center;
14  color: white;
15}
16
17.scene {
18  text-align: center;
19  padding: 20px;
20}
21
22h2 {
23  margin-bottom: 30px;
24  color: #f0c040;
25}
26
27.tomb {
28  display: flex;
29  justify-content: center;
30  perspective: 500px;
31}
32
33.sarcophagus {
34  position: relative;
35  width: 200px;
36  height: 300px;
37}
38
39.base {
40  width: 200px;
41  height: 280px;
42  background: linear-gradient(180deg, #d4af37, #b8941e);
43  border-radius: 10px 10px 5px 5px;
44  display: flex;
45  align-items: center;
46  justify-content: center;
47  font-size: 40px;
48  border: 3px solid #8d6e2e;
49  position: absolute;
50  bottom: 0;
51}
52
53.lid {
54  width: 210px;
55  height: 50px;
56  background: linear-gradient(180deg, #c9a84c, #a88932);
57  border-radius: 8px 8px 0 0;
58  display: flex;
59  align-items: center;
60  justify-content: center;
61  font-size: 18px;
62  font-weight: bold;
63  border: 3px solid #8d6e2e;
64  position: absolute;
65  top: 0;
66  left: -5px;
67  transform-origin: top center;
68  /* Add the animation shorthand here */
69  /* animation: openLid 3s ease-in-out 1s 1 normal forwards; */
70}
71
72/* Define @keyframes openLid */
73/* @keyframes openLid { */
74/*   0% { transform: rotateX(0deg); } */
75/*   100% { transform: rotateX(-120deg); } */
76/* } */
77
78.hint {
79  margin-top: 30px;
80  color: #aaa;
81  font-style: italic;
82}

Remember: Transform is like the magical spells of Egyptian priests - they can transform reality without changing its essence!