CSS 52 💻 transform translate and translate3d
The translate() and translate3d() functions move elements from their original position — horizontally, vertically, or in 3D space. Unlike position or margin, translation doesn’t affect the layout of other elements.
Overview of Functions
| Function | Dimensions | Values | Description |
|---|---|---|---|
translate() | 2D | x or x, y | Moves along X and Y |
translate3d() | 3D | x, y, z | Moves along X, Y, and Z |
translateX() | 1D | x | Moves horizontally |
translateY() | 1D | y | Moves vertically |
translateZ() | 1D | z | Moves in depth |
Understanding Translation
Original: translate(50px, 30px):
┌─────────┐
│ Box │ ┌─────────┐
│ │ │ Box │
└─────────┘ └─────────┘
← 50px →
↓ 30px| Translation | Direction |
|---|---|
| Positive X | Right |
| Negative X | Left |
| Positive Y | Down |
| Negative Y | Up |
| Positive Z | Toward viewer |
| Negative Z | Away from viewer |
1. translate() — 2D Translation
Moves an element along the X and Y axes.
.translate-single {
transform: translate(150px);
}
.translate {
transform: translate(50px, 50px);
}Syntax
translate(x) /* X only */
translate(x, y) /* X and Y */
translate(x, y) /* Both required if two values */| Syntax | Effect |
|---|---|
translate(150px) | Move 150px right |
translate(50px, 50px) | Move 50px right, 50px down |
translate(-30px, -20px) | Move 30px left, 20px up |
translate(50%) | Move 50% of element’s width |
translate(50%, 50%) | Move 50% of width and height |
Values
| Unit | Example | Description |
|---|---|---|
px | translate(50px) | Pixels |
% | translate(50%) | Percentage of element size |
em | translate(2em) | Relative to font size |
rem | translate(2rem) | Relative to root font size |
Key Points:
- Percentages are relative to the element’s own size, not the parent
translate(50%, 50%)moves the element by 50% of its own width/height- Can mix units:
translate(50px, 25%) - Translation doesn’t affect layout — other elements stay in place
2. translate3d() — 3D Translation
Moves an element along the X, Y, and Z axes.
.translate-3d {
transform: translate3d(50px, 50px, 100px);
}Syntax
translate3d(x, y, z)| Value | Axis | Description |
|---|---|---|
x | X | Horizontal movement |
y | Y | Vertical movement |
z | Z | Depth movement (toward/away from viewer) |
Key Points:
translateZ()requiresperspectiveon the parent to be visible- Positive Z moves toward the viewer; negative Z moves away
- Use with
transform-style: preserve-3dfor 3D children
3. translateX(), translateY(), translateZ()
Individual axis translation functions.
.translate-x {
transform: translateX(50px);
}
.translate-y {
transform: translateY(30px);
}
.translate-z {
transform: translateZ(100px);
}| Function | Axis | Equivalent |
|---|---|---|
translateX(50px) | Horizontal | translate(50px, 0) |
translateY(30px) | Vertical | translate(0, 30px) |
translateZ(100px) | Depth | translate3d(0, 0, 100px) |
Complete Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>transform translate() and translate3d()</title>
<style>
*, *::before, *::after {
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
padding: 20px;
background: #f8f9fa;
color: #333;
max-width: 1200px;
margin: 0 auto;
line-height: 1.6;
}
h1 {
color: #007bff;
border-bottom: 3px solid #007bff;
padding-bottom: 10px;
}
h2 {
color: #28a745;
border-left: 4px solid #28a745;
padding-left: 15px;
margin-top: 30px;
}
h3 {
color: #333;
margin-top: 20px;
}
section {
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
margin: 20px 0;
}
.code-block {
background: #1e1e1e;
color: #d4d4d4;
padding: 15px;
border-radius: 8px;
overflow-x: auto;
font-family: 'Courier New', monospace;
font-size: 0.9rem;
line-height: 1.8;
margin: 10px 0;
}
.reference-table {
width: 100%;
border-collapse: collapse;
margin: 15px 0;
}
.reference-table th,
.reference-table td {
padding: 10px;
border: 1px solid #ddd;
text-align: left;
}
.reference-table th {
background: #007bff;
color: white;
}
.reference-table tr:nth-child(even) {
background: #f8f9fa;
}
.note {
font-size: 0.9rem;
color: #6c757d;
margin-top: 5px;
}
.highlight {
background: #ffc107;
color: #333;
padding: 2px 6px;
border-radius: 4px;
font-weight: bold;
}
/* ====== DEMO AREA ====== */
.demo-area {
display: flex;
flex-wrap: wrap;
gap: 30px;
justify-content: center;
align-items: center;
padding: 50px 20px;
background: #e9ecef;
border-radius: 8px;
margin: 15px 0;
min-height: 250px;
}
.demo-area.perspective {
perspective: 800px;
}
.box {
width: 100px;
height: 100px;
background: linear-gradient(135deg, #007bff, #6c5ce7);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 0.8rem;
border-radius: 8px;
transition: transform 0.5s;
cursor: pointer;
text-align: center;
padding: 5px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
.box:hover {
box-shadow: 0 8px 25px rgba(0, 123, 255, 0.4);
}
/* Translate demos */
.translate-single {
transform: translate(150px);
}
.translate-single:hover {
transform: translate(0);
}
.translate {
transform: translate(50px, 50px);
}
.translate:hover {
transform: translate(0, 0);
}
.translate-neg {
transform: translate(-30px, -20px);
}
.translate-neg:hover {
transform: translate(0, 0);
}
.translate-percent {
transform: translate(50%, 50%);
}
.translate-percent:hover {
transform: translate(0, 0);
}
/* Translate3d demos */
.translate-3d {
transform: translate3d(50px, 50px, 100px);
}
.translate-3d:hover {
transform: translate3d(0, 0, 0);
}
.translate-z {
transform: translateZ(100px);
}
.translate-z:hover {
transform: translateZ(0);
}
/* ====== TRANSLATE COMPARISON ====== */
.translate-comparison {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 20px;
margin: 20px 0;
}
.translate-item {
text-align: center;
padding: 15px;
background: #f8f9fa;
border-radius: 8px;
border: 2px solid #ddd;
transition: all 0.3s;
}
.translate-item:hover {
border-color: #007bff;
box-shadow: 0 4px 15px rgba(0, 123, 255, 0.15);
}
.translate-item .demo-box {
width: 60px;
height: 60px;
margin: 0 auto 10px;
background: linear-gradient(135deg, #28a745, #20c997);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 0.7rem;
font-weight: bold;
transition: transform 0.3s;
}
.translate-item .label {
font-weight: bold;
font-size: 0.85rem;
color: #007bff;
}
/* ====== AXIS VISUALIZATION ====== */
.axis-viz {
display: flex;
flex-wrap: wrap;
gap: 30px;
justify-content: center;
margin: 20px 0;
}
.axis-card {
text-align: center;
padding: 20px;
background: white;
border: 2px solid #ddd;
border-radius: 12px;
width: 180px;
transition: all 0.3s;
}
.axis-card:hover {
border-color: #007bff;
box-shadow: 0 4px 15px rgba(0, 123, 255, 0.15);
}
.axis-card .axis-icon {
font-size: 2.5rem;
margin-bottom: 10px;
}
.axis-card h4 {
margin: 5px 0;
color: #007bff;
}
.axis-card p {
font-size: 0.85rem;
color: #6c757d;
margin: 5px 0;
}
.axis-card code {
background: #e9ecef;
padding: 2px 6px;
border-radius: 4px;
font-family: 'Courier New', monospace;
font-size: 0.8rem;
color: #dc3545;
}
/* ====== PRACTICAL: CENTERING ====== */
.center-container {
position: relative;
height: 250px;
background: #e9ecef;
border-radius: 8px;
margin: 15px 0;
}
.centered-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 150px;
height: 100px;
background: linear-gradient(135deg, #007bff, #6c5ce7);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);
}
/* ====== PRACTICAL: BUTTON LIFT ====== */
.btn-lift {
padding: 15px 30px;
background: #007bff;
color: white;
border: none;
border-radius: 8px;
font-size: 1em;
font-weight: bold;
cursor: pointer;
transition: all 0.3s;
margin: 5px;
}
.btn-lift:hover {
transform: translateY(-4px);
background: #0056b3;
box-shadow: 0 10px 25px rgba(0, 123, 255, 0.3);
}
.btn-lift:active {
transform: translateY(-1px);
}
/* ====== PRACTICAL: TOOLTIP ====== */
.tooltip-container {
position: relative;
display: inline-block;
margin: 40px 20px;
}
.tooltip-trigger {
padding: 10px 20px;
background: #6c5ce7;
color: white;
border: none;
border-radius: 8px;
font-weight: bold;
cursor: pointer;
}
.tooltip-text {
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%) translateY(-10px);
background: #333;
color: white;
padding: 8px 15px;
border-radius: 6px;
font-size: 0.85rem;
white-space: nowrap;
opacity: 0;
visibility: hidden;
transition: all 0.3s;
}
.tooltip-text::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border: 6px solid transparent;
border-top-color: #333;
}
.tooltip-container:hover .tooltip-text {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(-5px);
}
/* ====== PRACTICAL: 3D CUBE ====== */
.cube-scene {
width: 150px;
height: 150px;
perspective: 800px;
margin: 30px auto;
}
.cube {
width: 100%;
height: 100%;
position: relative;
transform-style: preserve-3d;
animation: rotateCube 8s infinite linear;
}
@keyframes rotateCube {
from { transform: rotateX(0) rotateY(0); }
to { transform: rotateX(360deg) rotateY(360deg); }
}
.cube .face {
position: absolute;
width: 150px;
height: 150px;
border: 2px solid rgba(0, 0, 0, 0.3);
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
color: white;
font-size: 0.9rem;
text-shadow: 0 2px 5px rgba(0,0,0,0.5);
border-radius: 8px;
}
.cube .front {
background: rgba(255, 0, 0, 0.8);
transform: translateZ(75px);
}
.cube .back {
background: rgba(0, 255, 0, 0.8);
transform: rotateY(180deg) translateZ(75px);
}
.cube .right {
background: rgba(0, 0, 255, 0.8);
transform: rotateY(90deg) translateZ(75px);
}
.cube .left {
background: rgba(255, 255, 0, 0.8);
transform: rotateY(-90deg) translateZ(75px);
}
.cube .top {
background: rgba(255, 0, 255, 0.8);
transform: rotateX(90deg) translateZ(75px);
}
.cube .bottom {
background: rgba(0, 255, 255, 0.8);
transform: rotateX(-90deg) translateZ(75px);
}
/* ====== TIPS ====== */
.tip-box {
padding: 15px;
border-radius: 8px;
margin: 10px 0;
border-left: 4px solid #007bff;
background: #f8f9fa;
}
.tip-box.success { border-left-color: #28a745; }
.tip-box.warning { border-left-color: #ffc107; }
.tip-box.danger { border-left-color: #dc3545; }
</style>
</head>
<body>
<h1>transform translate() and translate3d()</h1>
<!-- ====== 1. TRANSLATE() DEMO ====== -->
<section>
<h2>1. translate() — 2D Translation</h2>
<p>Hover over each box to see it return to its original position.</p>
<div class="demo-area">
<div class="box">Original</div>
<div class="box translate-single">translate(150px)</div>
<div class="box translate">translate(50px, 50px)</div>
<div class="box translate-neg">translate(-30px, -20px)</div>
<div class="box translate-percent">translate(50%, 50%)</div>
</div>
<div class="code-block">
/* Move 150px right */
.translate-single {
transform: translate(150px);
}
/* Move 50px right and down */
.translate {
transform: translate(50px, 50px);
}
/* Move 30px left and 20px up */
.translate-neg {
transform: translate(-30px, -20px);
}
/* Move 50% of its own width and height */
.translate-percent {
transform: translate(50%, 50%);
}
</div>
</section>
<!-- ====== 2. TRANSLATE3D() DEMO ====== -->
<section>
<h2>2. translate3d() — 3D Translation</h2>
<p>Moves elements in 3D space. Requires <code>perspective</code> on the parent.</p>
<div class="demo-area perspective">
<div class="box">Original</div>
<div class="box translate-3d">translate3d<br>(50, 50, 100)</div>
<div class="box translate-z">translateZ(100px)</div>
</div>
<div class="code-block">
/* Move in 3D space */
.translate-3d {
transform: translate3d(50px, 50px, 100px);
}
/* Move only in depth (toward viewer) */
.translate-z {
transform: translateZ(100px);
}
</div>
<p class="note">Positive Z moves the element <strong>toward</strong> the viewer; negative Z moves it <strong>away</strong>.</p>
</section>
<!-- ====== 3. AXIS VISUALIZATION ====== -->
<section>
<h2>3. Understanding the Axes</h2>
<div class="axis-viz">
<div class="axis-card">
<div class="axis-icon">↔️</div>
<h4>translateX()</h4>
<p>Horizontal movement</p>
<code>translateX(50px)</code>
<p class="note">Positive = right<br>Negative = left</p>
</div>
<div class="axis-card">
<div class="axis-icon">↕️</div>
<h4>translateY()</h4>
<p>Vertical movement</p>
<code>translateY(30px)</code>
<p class="note">Positive = down<br>Negative = up</p>
</div>
<div class="axis-card">
<div class="axis-icon">🔍</div>
<h4>translateZ()</h4>
<p>Depth movement</p>
<code>translateZ(100px)</code>
<p class="note">Positive = toward viewer<br>Negative = away</p>
</div>
</div>
<div class="code-block">
/* These are equivalent */
translateX(50px) = translate(50px, 0) = translate3d(50px, 0, 0)
translateY(30px) = translate(0, 30px) = translate3d(0, 30px, 0)
translateZ(100px) = translate3d(0, 0, 100px)
</div>
</section>
<!-- ====== 4. TRANSLATE COMPARISON ====== -->
<section>
<h2>4. Translation Comparison</h2>
<div class="translate-comparison">
<div class="translate-item">
<div class="demo-box" style="transform: translate(0);">0</div>
<div class="label">translate(0)</div>
<p class="note">Original position</p>
</div>
<div class="translate-item">
<div class="demo-box" style="transform: translate(20px);">20px</div>
<div class="label">translate(20px)</div>
<p class="note">Move right</p>
</div>
<div class="translate-item">
<div class="demo-box" style="transform: translate(0, 20px);">Y</div>
<div class="label">translateY(20px)</div>
<p class="note">Move down</p>
</div>
<div class="translate-item">
<div class="demo-box" style="transform: translate(20px, 20px);">XY</div>
<div class="label">translate(20px, 20px)</div>
<p class="note">Move diagonally</p>
</div>
<div class="translate-item">
<div class="demo-box" style="transform: translate(-20px, -20px);">-XY</div>
<div class="label">translate(-20px, -20px)</div>
<p class="note">Move up-left</p>
</div>
</div>
<div class="code-block">
transform: translate(0); /* No movement */
transform: translate(20px); /* Move right */
transform: translate(0, 20px); /* Move down */
transform: translate(20px, 20px); /* Move diagonally */
transform: translate(-20px, -20px); /* Move up-left */
</div>
</section>
<!-- ====== 5. PRACTICAL: PERFECT CENTERING ====== -->
<section>
<h2>5. Practical Example: Perfect Centering</h2>
<p>The classic trick: <code>top: 50%; left: 50%; transform: translate(-50%, -50%);</code></p>
<div class="center-container">
<div class="centered-box">
Perfectly Centered
</div>
</div>
<div class="code-block">
.centered-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* Move back by half its own width and height */
}
</div>
<p class="note">This works because percentages in <code>translate()</code> are relative to the <strong>element's own size</strong>.</p>
</section>
<!-- ====== 6. PRACTICAL: BUTTON LIFT ====== -->
<section>
<h2>6. Practical Example: Button Lift</h2>
<p>Hover and click the buttons to see the translate effect.</p>
<div style="text-align: center; margin: 15px 0;">
<button class="btn-lift">Hover Me</button>
<button class="btn-lift">Click Me</button>
<button class="btn-lift">Press Me</button>
</div>
<div class="code-block">
.btn-lift {
transition: all 0.3s;
}
.btn-lift:hover {
transform: translateY(-4px); /* Lift up */
}
.btn-lift:active {
transform: translateY(-1px); /* Press down slightly */
}
</div>
</section>
<!-- ====== 7. PRACTICAL: TOOLTIP ====== -->
<section>
<h2>7. Practical Example: Tooltip</h2>
<p>Hover over the button to see a tooltip positioned with <code>translate()</code>.</p>
<div style="text-align: center;">
<div class="tooltip-container">
<button class="tooltip-trigger">Hover Me</button>
<div class="tooltip-text">I'm a tooltip!</div>
</div>
</div>
<div class="code-block">
.tooltip-text {
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%); /* Center horizontally */
}
.tooltip-container:hover .tooltip-text {
transform: translateX(-50%) translateY(-5px); /* Animate up */
}
</div>
</section>
<!-- ====== 8. PRACTICAL: 3D CUBE ====== -->
<section>
<h2>8. Practical Example: 3D Cube with translateZ()</h2>
<p>A 3D cube built with <code>translateZ()</code> to position each face.</p>
<div class="cube-scene">
<div class="cube">
<div class="face front">Front</div>
<div class="face back">Back</div>
<div class="face right">Right</div>
<div class="face left">Left</div>
<div class="face top">Top</div>
<div class="face bottom">Bottom</div>
</div>
</div>
<div class="code-block">
.cube {
transform-style: preserve-3d;
}
/* Each face positioned with translateZ */
.front {
transform: translateZ(75px);
}
.back {
transform: rotateY(180deg) translateZ(75px);
}
.right {
transform: rotateY(90deg) translateZ(75px);
}
.left {
transform: rotateY(-90deg) translateZ(75px);
}
.top {
transform: rotateX(90deg) translateZ(75px);
}
.bottom {
transform: rotateX(-90deg) translateZ(75px);
}
</div>
</section>
<!-- ====== 9. REFERENCE TABLES ====== -->
<section>
<h2>9. Reference Tables</h2>
<h3>Translate Functions</h3>
<table class="reference-table">
<tr>
<th>Function</th>
<th>Axes</th>
<th>Example</th>
</tr>
<tr>
<td><code>translate()</code></td>
<td>X, Y</td>
<td><code>translate(50px, 30px)</code></td>
</tr>
<tr>
<td><code>translate3d()</code></td>
<td>X, Y, Z</td>
<td><code>translate3d(50px, 30px, 100px)</code></td>
</tr>
<tr>
<td><code>translateX()</code></td>
<td>X</td>
<td><code>translateX(50px)</code></td>
</tr>
<tr>
<td><code>translateY()</code></td>
<td>Y</td>
<td><code>translateY(30px)</code></td>
</tr>
<tr>
<td><code>translateZ()</code></td>
<td>Z</td>
<td><code>translateZ(100px)</code></td>
</tr>
</table>
<h3>Values</h3>
<table class="reference-table">
<tr>
<th>Unit</th>
<th>Relative To</th>
<th>Example</th>
</tr>
<tr>
<td><code>px</code></td>
<td>Absolute pixels</td>
<td><code>translate(50px)</code></td>
</tr>
<tr>
<td><code>%</code></td>
<td>Element's own size</td>
<td><code>translate(50%)</code></td>
</tr>
<tr>
<td><code>em</code></td>
<td>Font size</td>
<td><code>translate(2em)</code></td>
</tr>
<tr>
<td><code>rem</code></td>
<td>Root font size</td>
<td><code>translate(2rem)</code></td>
</tr>
</table>
<h3>Direction Reference</h3>
<table class="reference-table">
<tr>
<th>Direction</th>
<th>X</th>
<th>Y</th>
<th>Z</th>
</tr>
<tr>
<td>Right</td>
<td>Positive</td>
<td>—</td>
<td>—</td>
</tr>
<tr>
<td>Left</td>
<td>Negative</td>
<td>—</td>
<td>—</td>
</tr>
<tr>
<td>Down</td>
<td>—</td>
<td>Positive</td>
<td>—</td>
</tr>
<tr>
<td>Up</td>
<td>—</td>
<td>Negative</td>
<td>—</td>
</tr>
<tr>
<td>Toward viewer</td>
<td>—</td>
<td>—</td>
<td>Positive</td>
</tr>
<tr>
<td>Away from viewer</td>
<td>—</td>
<td>—</td>
<td>Negative</td>
</tr>
</table>
</section>
<!-- ====== 10. BEST PRACTICES ====== -->
<section>
<h2>10. Best Practices</h2>
<div style="background: #d4edda; padding: 20px; border-radius: 8px; border-left: 4px solid #28a745;">
<h3 style="margin-top: 0; color: #155724;">✅ Do This:</h3>
<ul>
<li>Use <code>translate()</code> for animations instead of <code>top</code>/<code>left</code> (better performance)</li>
<li>Use <code>translate(-50%, -50%)</code> for perfect centering</li>
<li>Use <code>translateY()</code> for button lift effects</li>
<li>Use <code>translateX()</code> for sliding menus and carousels</li>
<li>Use <code>translateZ()</code> with perspective for 3D effects</li>
<li>Combine with other transforms for complex animations</li>
<li>Respect <code>prefers-reduced-motion</code> for accessibility</li>
</ul>
</div>
<div style="background: #f8d7da; padding: 20px; border-radius: 8px; border-left: 4px solid #dc3545; margin-top: 15px;">
<h3 style="margin-top: 0; color: #721c24;">❌ Don't Do This:</h3>
<ul>
<li>Don't animate <code>top</code>/<code>left</code> when <code>translate()</code> works better</li>
<li>Don't use <code>translateZ()</code> without <code>perspective</code> on the parent</li>
<li>Don't forget that percentages in <code>translate()</code> are relative to the element's own size</li>
<li>Don't use <code>translate()</code> for layout — use it for effects</li>
<li>Don't translate elements so far they go off-screen</li>
</ul>
</div>
<div class="code-block">
/* Accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce) {
.btn-lift:hover {
transform: none;
}
}
/* Prefer translate over top/left for animations */
.box {
transition: transform 0.3s;
}
.box:hover {
transform: translateY(-5px); /* Better performance */
}
</div>
</section>
</body>
</html>Quick Reference
| Function | Axes | Example |
|---|---|---|
translate() | X, Y | translate(50px, 30px) |
translate3d() | X, Y, Z | translate3d(50px, 30px, 100px) |
translateX() | X | translateX(50px) |
translateY() | Y | translateY(30px) |
translateZ() | Z | translateZ(100px) |
Values
| Unit | Relative To | Example |
|---|---|---|
px | Absolute pixels | translate(50px) |
% | Element’s own size | translate(50%) |
em | Font size | translate(2em) |
rem | Root font size | translate(2rem) |
Direction Reference
| Direction | X | Y | Z |
|---|---|---|---|
| Right | Positive | — | — |
| Left | Negative | — | — |
| Down | — | Positive | — |
| Up | — | Negative | — |
| Toward viewer | — | — | Positive |
| Away from viewer | — | — | Negative |
Best Practices
✅ Do This:
/* Perfect centering */
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* Button lift */
.btn:hover {
transform: translateY(-4px);
}
/* Prefer translate over top/left for animations */
.box {
transition: transform 0.3s;
}
.box:hover {
transform: translateX(10px);
}
/* 3D depth */
.scene {
perspective: 800px;
}
.box {
transform: translateZ(100px);
}❌ Don’t Do This:
/* Don't animate top/left (worse performance) */
.box:hover {
top: -5px;
transition: top 0.3s;
}
/* Don't use translateZ without perspective */
.box {
transform: translateZ(100px); /* Won't be visible */
}
/* Don't translate elements off-screen */
.box {
transform: translate(5000px, 0); /* Lost forever */
}Pro Tip: translate() is one of the most useful transforms — use it for animations instead of top/left for better performance (it’s hardware-accelerated). The classic translate(-50%, -50%) trick is essential for perfect centering. Use translateY(-4px) for button lift effects and translateX() for sliding menus. Remember: percentages in translate() are relative to the element’s own size, not the parent — that’s what makes the centering trick work! And always respect prefers-reduced-motion for accessibility!
Stop using slow, ad-bloated tool sites! 🤮
🔎 Search “KandZ Tools” on Google to use many professional utilities for free.
KandZ.me is the ultimate minimalist hub for:
✅ Finance (Mortgage, Interest, Inflation)
✅ Tech (Base64, JSON, Dev Suite, IP)
✅ Health (BMI, BMR, TDEE)
✅ Productivity (Timer, Workspace, QR)
⚡️ Fast & Private
🔒 No data leaves your device
💎 100% Free
🔗 Use it now: https://tools.kandz.me
🔖 Bookmark it—you’ll need it later!
