CSS 49 💻 transform scale and scale3d
The scale() and scale3d() functions let you resize elements — making them larger or smaller — without affecting the layout of surrounding elements.
Overview of Functions
| Function | Dimensions | Values | Description |
|---|---|---|---|
scale() | 2D | s or s1, s2 | Uniform or separate X/Y scaling |
scale3d() | 3D | s1, s2, s3 | X, Y, and Z scaling |
1. scale() — 2D Scaling
The scale() function resizes an element in 2D space — horizontally and vertically.
.box {
transform: scale(1.5);
}Syntax
scale(s) /* Uniform scaling */
scale(s1, s2) /* Separate X and Y scaling */| Syntax | Effect |
|---|---|
scale(1.5) | 1.5x in both directions |
scale(1.5, 2) | 1.5x horizontal, 2x vertical |
scale(0.5) | Half size (both directions) |
scale(2) | 2x size (both directions) |
scale(1) | Original size (no change) |
Values
| Value | Effect |
|---|---|
1 | Original size |
> 1 | Enlarges (e.g., 1.5 = 150%) |
< 1 | Shrinks (e.g., 0.5 = 50%) |
0 | Invisible (zero size) |
| Negative | Flips/mirrors the element |
Key Points:
- Scaling maintains the element’s aspect ratio when using a single value
- Scaling doesn’t affect layout — other elements stay in place
- Scale is applied from the transform-origin (center by default)
- Use
transform-originto change the scaling pivot
2. scale3d() — 3D Scaling
The scale3d() function resizes an element in 3D space — along the X, Y, and Z axes.
.box {
transform: scale3d(1.5, 1.5, 2);
}Syntax
scale3d(s1, s2, s3)| Value | Axis | Description |
|---|---|---|
s1 | X | Horizontal scaling |
s2 | Y | Vertical scaling |
s3 | Z | Depth scaling |
Key Points:
s3(Z scaling) requiresperspectiveon the parent to be visiblescale3d(1, 1, 1)= no scalingscale3d(2, 2, 2)= 2x in all dimensionsscale3d(1, 1, 2)= normal X/Y, but 2x depth- Use with
transform-style: preserve-3dfor children to maintain 3D positioning
scale() vs scale3d()
| Aspect | scale() | scale3d() |
|---|---|---|
| Dimensions | 2D (X, Y) | 3D (X, Y, Z) |
| Values | 1 or 2 | 3 (required) |
| Z-axis | Not supported | Supported |
| Perspective needed | No | Yes (for Z) |
| Use case | Simple resizing | 3D effects |
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 scale() and scale3d()</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: 40px;
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);
}
/* Scale demos */
.scale-1-5 {
transform: scale(1.5);
}
.scale-1-5:hover {
transform: scale(2);
}
.scale-1-5-2 {
transform: scale(1.5, 2);
}
.scale-1-5-2:hover {
transform: scale(2, 1);
}
.scale-half {
transform: scale(0.5);
}
.scale-half:hover {
transform: scale(0.8);
}
/* Scale3d demos */
.scale3d-2-2-2 {
transform: scale3d(2, 2, 2);
}
.scale3d-2-2-2:hover {
transform: scale3d(1.5, 1.5, 3);
}
.scale3d-1-1-2 {
transform: scale3d(1, 1, 2);
}
.scale3d-1-1-2:hover {
transform: scale3d(1.5, 1.5, 3);
}
/* ====== SCALE COMPARISON ====== */
.scale-comparison {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 20px;
margin: 20px 0;
}
.scale-item {
text-align: center;
padding: 15px;
background: #f8f9fa;
border-radius: 8px;
border: 2px solid #ddd;
transition: all 0.3s;
}
.scale-item:hover {
border-color: #007bff;
box-shadow: 0 4px 15px rgba(0, 123, 255, 0.15);
}
.scale-item .box-small {
width: 60px;
height: 60px;
margin: 0 auto 10px;
background: linear-gradient(135deg, #28a745, #20c997);
border-radius: 8px;
transition: transform 0.3s;
}
.scale-item:hover .box-small {
transform: scale(1.3);
}
.scale-item .label {
font-weight: bold;
font-size: 0.85rem;
color: #007bff;
}
/* ====== PRACTICAL: BUTTON SCALE ====== */
.btn-scale {
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-scale:hover {
transform: scale(1.05);
background: #0056b3;
box-shadow: 0 8px 20px rgba(0, 123, 255, 0.3);
}
.btn-scale:active {
transform: scale(0.98);
}
/* ====== PRACTICAL: IMAGE GALLERY ====== */
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 15px;
margin: 15px 0;
}
.gallery-item {
height: 150px;
border-radius: 8px;
background: linear-gradient(135deg, #007bff, #6c5ce7);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 2rem;
transition: all 0.4s;
cursor: pointer;
overflow: hidden;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.gallery-item:hover {
transform: scale(1.1);
box-shadow: 0 8px 25px rgba(0, 123, 255, 0.3);
z-index: 10;
}
/* ====== PRACTICAL: 3D CUBE SCALE ====== */
.cube-scene {
width: 150px;
height: 150px;
perspective: 800px;
margin: 30px auto;
}
.cube {
width: 100%;
height: 100%;
position: relative;
transform-style: preserve-3d;
animation: pulseCube 3s infinite alternate;
}
@keyframes pulseCube {
from { transform: scale3d(0.8, 0.8, 0.8) rotateX(0) rotateY(0); }
to { transform: scale3d(1.2, 1.2, 1.2) rotateX(15deg) rotateY(15deg); }
}
.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 scale() and scale3d()</h1>
<!-- ====== 1. SCALE() DEMO ====== -->
<section>
<h2>1. scale() — 2D Scaling</h2>
<p>Resizes an element horizontally and vertically. Hover over each box to see the scale change!</p>
<div class="demo-area">
<div class="box">Original<br>(scale: 1)</div>
<div class="box scale-1-5">scale(1.5)<br>Uniform</div>
<div class="box scale-1-5-2">scale(1.5, 2)<br>X=1.5, Y=2</div>
<div class="box scale-half">scale(0.5)<br>Half size</div>
</div>
<div class="code-block">
/* Uniform scaling — both directions */
.scale-1-5 {
transform: scale(1.5);
}
/* Separate X and Y scaling */
.scale-1-5-2 {
transform: scale(1.5, 2); /* 1.5x width, 2x height */
}
/* Shrink to half size */
.scale-half {
transform: scale(0.5);
}
</div>
</section>
<!-- ====== 2. SCALE3D() DEMO ====== -->
<section>
<h2>2. scale3d() — 3D Scaling</h2>
<p>Resizes an element in 3D space (X, Y, and Z axes). Requires <code>perspective</code> on the parent.</p>
<div class="demo-area perspective">
<div class="box scale3d-2-2-2">scale3d(2, 2, 2)<br>All axes</div>
<div class="box scale3d-1-1-2">scale3d(1, 1, 2)<br>Depth only</div>
</div>
<div class="code-block">
/* Scale all three axes */
.scale3d-2-2-2 {
transform: scale3d(2, 2, 2); /* 2x in X, Y, Z */
}
/* Scale only the Z (depth) axis */
.scale3d-1-1-2 {
transform: scale3d(1, 1, 2); /* Normal X/Y, 2x depth */
}
</div>
<p class="note">The Z-axis scale (depth) is only visible when <code>perspective</code> is applied to the parent.</p>
</section>
<!-- ====== 3. SCALE COMPARISON ====== -->
<section>
<h2>3. Scale Value Comparison</h2>
<p>Hover over each card to see the scale effect.</p>
<div class="scale-comparison">
<div class="scale-item">
<div class="box-small" style="transform: scale(0.5);"></div>
<div class="label">scale(0.5)</div>
<p class="note">Half size</p>
</div>
<div class="scale-item">
<div class="box-small" style="transform: scale(1);"></div>
<div class="label">scale(1)</div>
<p class="note">Original</p>
</div>
<div class="scale-item">
<div class="box-small" style="transform: scale(1.5);"></div>
<div class="label">scale(1.5)</div>
<p class="note">1.5x size</p>
</div>
<div class="scale-item">
<div class="box-small" style="transform: scale(2);"></div>
<div class="label">scale(2)</div>
<p class="note">2x size</p>
</div>
<div class="scale-item">
<div class="box-small" style="transform: scale(2, 0.5);"></div>
<div class="label">scale(2, 0.5)</div>
<p class="note">Wide and short</p>
</div>
</div>
<div class="code-block">
transform: scale(0.5); /* Half size */
transform: scale(1); /* Original size */
transform: scale(1.5); /* 1.5x size */
transform: scale(2); /* 2x size */
transform: scale(2, 0.5); /* 2x width, 0.5x height */
</div>
</section>
<!-- ====== 4. PRACTICAL: BUTTON SCALE ====== -->
<section>
<h2>4. Practical Example: Button Scale</h2>
<p>Hover and click the buttons to see the scale effect.</p>
<div style="text-align: center; margin: 15px 0;">
<button class="btn-scale">Hover Me</button>
<button class="btn-scale">Click Me</button>
<button class="btn-scale">Press Me</button>
</div>
<div class="code-block">
.btn-scale {
transition: all 0.3s;
}
.btn-scale:hover {
transform: scale(1.05); /* Slightly larger on hover */
}
.btn-scale:active {
transform: scale(0.98); /* Slightly smaller on click */
}
</div>
</section>
<!-- ====== 5. PRACTICAL: IMAGE GALLERY ====== -->
<section>
<h2>5. Practical Example: Image Gallery</h2>
<p>Hover over each item to see the scale effect.</p>
<div class="gallery">
<div class="gallery-item">🖼️</div>
<div class="gallery-item">🎨</div>
<div class="gallery-item">📷</div>
<div class="gallery-item">🎭</div>
</div>
<div class="code-block">
.gallery-item {
transition: all 0.4s;
}
.gallery-item:hover {
transform: scale(1.1);
box-shadow: 0 8px 25px rgba(0, 123, 255, 0.3);
z-index: 10;
}
</div>
</section>
<!-- ====== 6. PRACTICAL: 3D CUBE SCALE ====== -->
<section>
<h2>6. Practical Example: 3D Cube with scale3d()</h2>
<p>A cube that pulses using <code>scale3d()</code>.</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;
animation: pulseCube 3s infinite alternate;
}
@keyframes pulseCube {
from { transform: scale3d(0.8, 0.8, 0.8) rotateX(0) rotateY(0); }
to { transform: scale3d(1.2, 1.2, 1.2) rotateX(15deg) rotateY(15deg); }
}
</div>
</section>
<!-- ====== 7. REFERENCE TABLES ====== -->
<section>
<h2>7. Reference Tables</h2>
<h3>scale() Values</h3>
<table class="reference-table">
<tr>
<th>Value</th>
<th>Effect</th>
<th>Example</th>
</tr>
<tr>
<td><code>scale(1)</code></td>
<td>Original size</td>
<td><code>scale(1)</code></td>
</tr>
<tr>
<td><code>scale(1.5)</code></td>
<td>1.5x size (both axes)</td>
<td><code>scale(1.5)</code></td>
</tr>
<tr>
<td><code>scale(2)</code></td>
<td>2x size (both axes)</td>
<td><code>scale(2)</code></td>
</tr>
<tr>
<td><code>scale(0.5)</code></td>
<td>Half size</td>
<td><code>scale(0.5)</code></td>
</tr>
<tr>
<td><code>scale(2, 1)</code></td>
<td>2x width, 1x height</td>
<td><code>scale(2, 1)</code></td>
</tr>
<tr>
<td><code>scale(1, 2)</code></td>
<td>1x width, 2x height</td>
<td><code>scale(1, 2)</code></td>
</tr>
</table>
<h3>scale3d() Values</h3>
<table class="reference-table">
<tr>
<th>Value</th>
<th>Effect</th>
</tr>
<tr>
<td><code>scale3d(1, 1, 1)</code></td>
<td>No scaling</td>
</tr>
<tr>
<td><code>scale3d(2, 2, 2)</code></td>
<td>2x in all dimensions</td>
</tr>
<tr>
<td><code>scale3d(1, 1, 2)</code></td>
<td>Normal X/Y, 2x depth</td>
</tr>
<tr>
<td><code>scale3d(2, 1, 1)</code></td>
<td>2x width only</td>
</tr>
<tr>
<td><code>scale3d(1, 2, 1)</code></td>
<td>2x height only</td>
</tr>
</table>
<h3>scale() vs scale3d()</h3>
<table class="reference-table">
<tr>
<th>Aspect</th>
<th>scale()</th>
<th>scale3d()</th>
</tr>
<tr>
<td><strong>Dimensions</strong></td>
<td>2D (X, Y)</td>
<td>3D (X, Y, Z)</td>
</tr>
<tr>
<td><strong>Values</strong></td>
<td>1 or 2</td>
<td>3 (required)</td>
</tr>
<tr>
<td><strong>Z-axis</strong></td>
<td>Not supported</td>
<td>Supported</td>
</tr>
<tr>
<td><strong>Perspective needed</strong></td>
<td>No</td>
<td>Yes (for Z)</td>
</tr>
<tr>
<td><strong>Use case</strong></td>
<td>Simple resizing</td>
<td>3D effects</td>
</tr>
</table>
</section>
<!-- ====== 8. BEST PRACTICES ====== -->
<section>
<h2>8. 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>scale(1.05)</code> for subtle hover effects on buttons</li>
<li>Use <code>scale(0.98)</code> for active/pressed states</li>
<li>Use <code>scale(1.1)</code> for image gallery hover effects</li>
<li>Use <code>scale3d()</code> for 3D scaling with perspective</li>
<li>Combine scale with other transforms (rotate, translate)</li>
<li>Use <code>transform-origin</code> to control the scaling pivot</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 scale elements too much (can cause blurriness or overflow)</li>
<li>Don't use <code>scale3d()</code> without <code>perspective</code> on the parent</li>
<li>Don't scale text dramatically (can affect readability)</li>
<li>Don't use negative scale values without understanding the mirror effect</li>
<li>Don't forget that scaling doesn't affect layout</li>
</ul>
</div>
<div class="code-block">
/* Accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce) {
.btn-scale:hover,
.gallery-item:hover {
transform: none;
}
}
/* Control scaling pivot */
.box {
transform-origin: top left;
transform: scale(1.5);
}
</div>
</section>
</body>
</html>Quick Reference
| Function | Values | Effect |
|---|---|---|
scale(s) | 1 value | Uniform scaling |
scale(s1, s2) | 2 values | X and Y scaling |
scale3d(s1, s2, s3) | 3 values | X, Y, and Z scaling |
scale() Values
| Value | Effect |
|---|---|
scale(1) | Original size |
scale(1.5) | 1.5x size (both axes) |
scale(2) | 2x size (both axes) |
scale(0.5) | Half size |
scale(2, 1) | 2x width, 1x height |
scale(1, 2) | 1x width, 2x height |
scale3d() Values
| Value | Effect |
|---|---|
scale3d(1, 1, 1) | No scaling |
scale3d(2, 2, 2) | 2x in all dimensions |
scale3d(1, 1, 2) | Normal X/Y, 2x depth |
scale3d(2, 1, 1) | 2x width only |
scale3d(1, 2, 1) | 2x height only |
scale() vs scale3d()
| Aspect | scale() | scale3d() |
|---|---|---|
| Dimensions | 2D (X, Y) | 3D (X, Y, Z) |
| Values | 1 or 2 | 3 (required) |
| Z-axis | Not supported | Supported |
| Perspective needed | No | Yes (for Z) |
| Use case | Simple resizing | 3D effects |
Best Practices
✅ Do This:
/* Subtle hover effect */
.btn:hover {
transform: scale(1.05);
}
/* Pressed state */
.btn:active {
transform: scale(0.98);
}
/* Image gallery hover */
.gallery-item:hover {
transform: scale(1.1);
}
/* 3D scaling with perspective */
.scene {
perspective: 800px;
}
.box {
transform: scale3d(1.5, 1.5, 2);
}
/* Control scaling pivot */
.box {
transform-origin: top left;
transform: scale(1.5);
}
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
.btn:hover {
transform: none;
}
}❌ Don’t Do This:
/* Don't scale too much */
.box:hover {
transform: scale(5); /* Can cause overflow and blurriness */
}
/* Don't use scale3d without perspective */
.box {
transform: scale3d(2, 2, 2); /* Z scaling won't be visible */
/* Add perspective on the parent */
}
/* Don't scale text dramatically */
h1:hover {
transform: scale(3); /* Text becomes blurry and hard to read */
}Pro Tip: scale() is one of the most versatile transforms. Use subtle scaling (1.02–1.1) for hover effects on buttons, cards, and images — it adds a satisfying “pop” without being distracting. Use scale(0.98) for active/pressed states to simulate a button being pushed down. For 3D effects, use scale3d() with perspective on the parent. Remember: scaling doesn’t affect layout — other elements stay in place, so you don’t need to worry about breaking your page structure. And always respect prefers-reduced-motion for users who are sensitive to motion!
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!
