CSS 50 💻 transform scaleX, scaleY and scaleZ - KandZ

These three functions are the individual axis scaling functions in CSS transforms. Each one scales an element along a specific axis: X (horizontal), Y (vertical), or Z (depth).

Overview of Functions

Function	Axis	Equivalent	Effect
`scaleX()`	Horizontal	`scale3d(s, 1, 1)`	Stretches width
`scaleY()`	Vertical	`scale3d(1, s, 1)`	Stretches height
`scaleZ()`	Depth	`scale3d(1, 1, s)`	Stretches depth

Understanding the Axes

        Y (vertical)
        ↑
        │
        │
        │
        └──────────→ X (horizontal)
       /
      /
     ↙
    Z (depth, toward viewer)

Axis	Direction	Scaling Effect
X	Horizontal (left–right)	Width increases/decreases
Y	Vertical (up–down)	Height increases/decreases
Z	Depth (toward viewer)	Depth increases/decreases

1. scaleX()

Scales an element horizontally (along the X-axis). Only the width changes.

.scaleX {
    transform: scaleX(2);
}

Value	Effect
`scaleX(1)`	Original width
`scaleX(2)`	2x width
`scaleX(0.5)`	Half width
`scaleX(-1)`	Flipped horizontally (mirror)
`scaleX(0)`	Zero width (invisible)

Equivalent: scale3d(2, 1, 1) or scale(2, 1)

Use cases:

Stretching text or images horizontally
Creating a “wide” effect
Animating width changes (without affecting layout)
Flipping elements horizontally

2. scaleY()

Scales an element vertically (along the Y-axis). Only the height changes.

.scaleY {
    transform: scaleY(2);
}

Value	Effect
`scaleY(1)`	Original height
`scaleY(2)`	2x height
`scaleY(0.5)`	Half height
`scaleY(-1)`	Flipped vertically (mirror)
`scaleY(0)`	Zero height (invisible)

Equivalent: scale3d(1, 2, 1) or scale(1, 2)

Use cases:

Stretching text or images vertically
Creating a “tall” effect
Animating height changes (without affecting layout)
Flipping elements vertically

3. scaleZ()

Scales an element in depth (along the Z-axis). Requires perspective on the parent to be visible.

.scaleZ {
    transform: scaleZ(2);
}

Value	Effect
`scaleZ(1)`	Original depth
`scaleZ(2)`	2x depth
`scaleZ(0.5)`	Half depth
`scaleZ(0)`	Zero depth

Equivalent: scale3d(1, 1, 2)

Important:

scaleZ() only affects 3D-positioned children (those with translateZ)
The element itself doesn’t appear to change size
Requires perspective on the parent and transform-style: preserve-3d on the container
Best used with 3D scenes (cubes, cards, etc.)

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 scaleX, scaleY, and scaleZ</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: 50px;
            justify-content: center;
            align-items: center;
            padding: 50px 20px;
            background: #e9ecef;
            border-radius: 8px;
            margin: 15px 0;
            min-height: 250px;
        }

        .demo-area.perspective {
            perspective: 600px;
        }

        .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.9rem;
            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);
        }

        /* Individual scale functions */
        .scaleX {
            transform: scaleX(2);
        }

        .scaleX:hover {
            transform: scaleX(0.5);
        }

        .scaleY {
            transform: scaleY(2);
        }

        .scaleY:hover {
            transform: scaleY(0.5);
        }

        .scaleZ {
            transform: scaleZ(2);
        }

        .scaleZ:hover {
            transform: scaleZ(0.5);
        }

        /* Comparison grid */
        .scale-comparison {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(140px, 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 .demo-box {
            width: 60px;
            height: 60px;
            margin: 0 auto 10px;
            background: linear-gradient(135deg, #28a745, #20c997);
            border-radius: 8px;
            transition: transform 0.3s;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 0.7rem;
            font-weight: bold;
        }

        .scale-item .label {
            font-weight: bold;
            font-size: 0.85rem;
            color: #007bff;
        }

        /* ====== SCALEX DEMO ====== */
        .scaleX-demo {
            display: flex;
            flex-direction: column;
            gap: 15px;
            align-items: center;
            margin: 15px 0;
        }

        .scaleX-row {
            display: flex;
            gap: 15px;
            align-items: center;
            flex-wrap: wrap;
            justify-content: center;
        }

        .scaleX-box {
            width: 80px;
            height: 80px;
            background: linear-gradient(135deg, #007bff, #6c5ce7);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            font-size: 0.8rem;
            transition: transform 0.3s;
        }

        .scaleX-1 { transform: scaleX(1); }
        .scaleX-2 { transform: scaleX(2); }
        .scaleX-0-5 { transform: scaleX(0.5); }
        .scaleX-neg { transform: scaleX(-1); }

        /* ====== SCALEY DEMO ====== */
        .scaleY-demo {
            display: flex;
            gap: 20px;
            align-items: flex-end;
            justify-content: center;
            margin: 15px 0;
            flex-wrap: wrap;
        }

        .scaleY-box {
            width: 80px;
            height: 80px;
            background: linear-gradient(135deg, #28a745, #20c997);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            font-size: 0.8rem;
            transition: transform 0.3s;
            transform-origin: bottom;
        }

        .scaleY-1 { transform: scaleY(1); }
        .scaleY-2 { transform: scaleY(2); }
        .scaleY-0-5 { transform: scaleY(0.5); }
        .scaleY-neg { transform: scaleY(-1); }

        /* ====== PRACTICAL: BAR CHART ====== */
        .bar-chart {
            display: flex;
            gap: 20px;
            align-items: flex-end;
            justify-content: center;
            height: 200px;
            margin: 20px 0;
            padding: 20px;
            background: #f8f9fa;
            border-radius: 8px;
            border: 2px solid #ddd;
        }

        .bar {
            width: 60px;
            background: linear-gradient(180deg, #007bff, #6c5ce7);
            border-radius: 8px 8px 0 0;
            transform-origin: bottom;
            transition: transform 0.5s;
            display: flex;
            align-items: flex-start;
            justify-content: center;
            color: white;
            font-weight: bold;
            font-size: 0.8rem;
            padding-top: 5px;
        }

        .bar:hover {
            transform: scaleY(1.1);
        }

        /* ====== PRACTICAL: HORIZONTAL PROGRESS ====== */
        .progress-container {
            width: 100%;
            max-width: 500px;
            height: 30px;
            background: #e9ecef;
            border-radius: 15px;
            overflow: hidden;
            margin: 15px auto;
        }

        .progress-bar {
            height: 100%;
            background: linear-gradient(90deg, #007bff, #6c5ce7);
            border-radius: 15px;
            transform-origin: left;
            transition: transform 1s;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            padding-right: 10px;
            color: white;
            font-weight: bold;
            font-size: 0.8rem;
        }

        .progress-bar:hover {
            transform: scaleX(1.05);
        }

        /* ====== 3D CUBE WITH SCALEZ ====== */
        .cube-scene {
            width: 150px;
            height: 150px;
            perspective: 800px;
            margin: 30px auto;
        }

        .cube {
            width: 100%;
            height: 100%;
            position: relative;
            transform-style: preserve-3d;
            animation: pulseCubeZ 3s infinite alternate;
        }

        @keyframes pulseCubeZ {
            from { transform: rotateX(-15deg) rotateY(-15deg) scaleZ(1); }
            to { transform: rotateX(-15deg) rotateY(-15deg) scaleZ(2); }
        }

        .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 scaleX, scaleY, and scaleZ</h1>

    <!-- ====== 1. BASIC SCALE FUNCTIONS ====== -->
    <section>
        <h2>1. Basic Axis Scaling</h2>
        <p>Hover over each box to see the scale change!</p>

        <div class="demo-area">
            <div class="box scaleX">scaleX(2)</div>
            <div class="box scaleY">scaleY(2)</div>
            <div class="box scaleZ">scaleZ(2)</div>
        </div>

        <p class="note"><strong>scaleX</strong> stretches horizontally. <strong>scaleY</strong> stretches vertically. <strong>scaleZ</strong> stretches depth (needs perspective).</p>

        <div class="code-block">
            /* Scale horizontally (X-axis) */
            .scaleX {
                transform: scaleX(2); /* 2x width */
            }

            /* Scale vertically (Y-axis) */
            .scaleY {
                transform: scaleY(2); /* 2x height */
            }

            /* Scale in depth (Z-axis) */
            .scaleZ {
                transform: scaleZ(2); /* 2x depth */
            }
        </div>
    </section>

    <!-- ====== 2. AXIS VISUALIZATION ====== -->
    <section>
        <h2>2. Understanding the Axes</h2>

        <div class="scale-comparison">
            <div class="scale-item">
                <div class="demo-box" style="transform: scaleX(1.5);">X</div>
                <div class="label">scaleX()</div>
                <p class="note">Stretches width</p>
            </div>
            <div class="scale-item">
                <div class="demo-box" style="transform: scaleY(1.5);">Y</div>
                <div class="label">scaleY()</div>
                <p class="note">Stretches height</p>
            </div>
            <div class="scale-item">
                <div class="demo-box" style="transform: scaleZ(1.5);">Z</div>
                <div class="label">scaleZ()</div>
                <p class="note">Stretches depth</p>
            </div>
        </div>

        <div class="code-block">
            /* These are equivalent */
            scaleX(2) = scale3d(2, 1, 1) = scale(2, 1)
            scaleY(2) = scale3d(1, 2, 1) = scale(1, 2)
            scaleZ(2) = scale3d(1, 1, 2)
        </div>
    </section>

    <!-- ====== 3. SCALEX COMPARISON ====== -->
    <section>
        <h2>3. scaleX() Comparison</h2>

        <div class="scaleX-demo">
            <div class="scaleX-row">
                <div class="scaleX-box scaleX-1">scaleX(1)</div>
                <div class="scaleX-box scaleX-2">scaleX(2)</div>
                <div class="scaleX-box scaleX-0-5">scaleX(0.5)</div>
                <div class="scaleX-box scaleX-neg">scaleX(-1)</div>
            </div>
        </div>

        <div class="code-block">
            transform: scaleX(1);   /* Original width */
            transform: scaleX(2);   /* 2x width */
            transform: scaleX(0.5); /* Half width */
            transform: scaleX(-1);  /* Flipped horizontally */
        </div>
    </section>

    <!-- ====== 4. SCALEY COMPARISON ====== -->
    <section>
        <h2>4. scaleY() Comparison</h2>

        <div class="scaleY-demo">
            <div class="scaleY-box scaleY-1">scaleY(1)</div>
            <div class="scaleY-box scaleY-2">scaleY(2)</div>
            <div class="scaleY-box scaleY-0-5">scaleY(0.5)</div>
            <div class="scaleY-box scaleY-neg">scaleY(-1)</div>
        </div>

        <div class="code-block">
            transform: scaleY(1);   /* Original height */
            transform: scaleY(2);   /* 2x height */
            transform: scaleY(0.5); /* Half height */
            transform: scaleY(-1);  /* Flipped vertically */
        </div>
    </section>

    <!-- ====== 5. PRACTICAL: BAR CHART ====== -->
    <section>
        <h2>5. Practical Example: Bar Chart</h2>
        <p>Bars grow using <code>scaleY()</code> — hover over each bar to see the effect.</p>

        <div class="bar-chart">
            <div class="bar" style="height: 40%;">40%</div>
            <div class="bar" style="height: 65%;">65%</div>
            <div class="bar" style="height: 85%;">85%</div>
            <div class="bar" style="height: 55%;">55%</div>
            <div class="bar" style="height: 75%;">75%</div>
        </div>

        <div class="code-block">
            .bar {
                transform-origin: bottom;
                transition: transform 0.5s;
            }

            .bar:hover {
                transform: scaleY(1.1); /* Grows from the bottom */
            }
        </div>

        <p class="note">Use <code>transform-origin: bottom</code> so bars grow upward from their base.</p>
    </section>

    <!-- ====== 6. PRACTICAL: PROGRESS BAR ====== -->
    <section>
        <h2>6. Practical Example: Progress Bar</h2>
        <p>The progress bar uses <code>scaleX()</code> to fill from the left.</p>

        <div class="progress-container">
            <div class="progress-bar" style="width: 75%;">75%</div>
        </div>

        <div class="code-block">
            .progress-bar {
                transform-origin: left;
                transition: transform 1s;
            }

            .progress-bar:hover {
                transform: scaleX(1.05); /* Slight growth on hover */
            }
        </div>

        <p class="note">Use <code>transform-origin: left</code> so the bar grows from the left edge.</p>
    </section>

    <!-- ====== 7. PRACTICAL: 3D CUBE WITH SCALEZ ====== -->
    <section>
        <h2>7. Practical Example: 3D Cube with scaleZ()</h2>
        <p>A cube that pulses in depth using <code>scaleZ()</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: pulseCubeZ 3s infinite alternate;
            }

            @keyframes pulseCubeZ {
                from { transform: rotateX(-15deg) rotateY(-15deg) scaleZ(1); }
                to { transform: rotateX(-15deg) rotateY(-15deg) scaleZ(2); }
            }
        </div>

        <p class="note"><code>scaleZ()</code> changes the depth of the cube — the front and back faces move apart.</p>
    </section>

    <!-- ====== 8. REFERENCE TABLES ====== -->
    <section>
        <h2>8. Reference Tables</h2>

        <h3>scaleX() Values</h3>
        <table class="reference-table">
            <tr>
                <th>Value</th>
                <th>Effect</th>
            </tr>
            <tr>
                <td><code>scaleX(1)</code></td>
                <td>Original width</td>
            </tr>
            <tr>
                <td><code>scaleX(2)</code></td>
                <td>2x width</td>
            </tr>
            <tr>
                <td><code>scaleX(0.5)</code></td>
                <td>Half width</td>
            </tr>
            <tr>
                <td><code>scaleX(-1)</code></td>
                <td>Flipped horizontally</td>
            </tr>
        </table>

        <h3>scaleY() Values</h3>
        <table class="reference-table">
            <tr>
                <th>Value</th>
                <th>Effect</th>
            </tr>
            <tr>
                <td><code>scaleY(1)</code></td>
                <td>Original height</td>
            </tr>
            <tr>
                <td><code>scaleY(2)</code></td>
                <td>2x height</td>
            </tr>
            <tr>
                <td><code>scaleY(0.5)</code></td>
                <td>Half height</td>
            </tr>
            <tr>
                <td><code>scaleY(-1)</code></td>
                <td>Flipped vertically</td>
            </tr>
        </table>

        <h3>scaleZ() Values</h3>
        <table class="reference-table">
            <tr>
                <th>Value</th>
                <th>Effect</th>
            </tr>
            <tr>
                <td><code>scaleZ(1)</code></td>
                <td>Original depth</td>
            </tr>
            <tr>
                <td><code>scaleZ(2)</code></td>
                <td>2x depth</td>
            </tr>
            <tr>
                <td><code>scaleZ(0.5)</code></td>
                <td>Half depth</td>
            </tr>
        </table>

        <h3>Function Equivalents</h3>
        <table class="reference-table">
            <tr>
                <th>Function</th>
                <th>Equivalent</th>
            </tr>
            <tr>
                <td><code>scaleX(2)</code></td>
                <td><code>scale3d(2, 1, 1)</code> or <code>scale(2, 1)</code></td>
            </tr>
            <tr>
                <td><code>scaleY(2)</code></td>
                <td><code>scale3d(1, 2, 1)</code> or <code>scale(1, 2)</code></td>
            </tr>
            <tr>
                <td><code>scaleZ(2)</code></td>
                <td><code>scale3d(1, 1, 2)</code></td>
            </tr>
        </table>
    </section>

    <!-- ====== 9. BEST PRACTICES ====== -->
    <section>
        <h2>9. 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>scaleX()</code> for horizontal stretching (progress bars, dividers)</li>
                <li>Use <code>scaleY()</code> for vertical stretching (bar charts, accordions)</li>
                <li>Use <code>scaleZ()</code> for 3D depth effects (cubes, 3D scenes)</li>
                <li>Use <code>transform-origin</code> to control the scaling pivot</li>
                <li>Combine with other transforms for complex effects</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 use <code>scaleZ()</code> without <code>perspective</code> on the parent</li>
                <li>Don't scale elements too much (causes blurriness or overflow)</li>
                <li>Don't use <code>scaleX(-1)</code> or <code>scaleY(-1)</code> without understanding the mirror effect</li>
                <li>Don't forget that scaling doesn't affect layout</li>
                <li>Don't scale text dramatically (affects readability)</li>
            </ul>
        </div>

        <div class="code-block">
            /* Accessibility: respect reduced motion */
            @media (prefers-reduced-motion: reduce) {
                .bar:hover,
                .progress-bar:hover {
                    transform: none;
                }
            }

            /* Control scaling pivot */
            .bar {
                transform-origin: bottom; /* Grow from bottom */
            }

            .progress-bar {
                transform-origin: left; /* Fill from left */
            }
        </div>
    </section>

</body>
</html>

Quick Reference

Function	Axis	Equivalent	Effect
`scaleX()`	Horizontal	`scale3d(s, 1, 1)`	Stretches width
`scaleY()`	Vertical	`scale3d(1, s, 1)`	Stretches height
`scaleZ()`	Depth	`scale3d(1, 1, s)`	Stretches depth

scaleX() Values

Value	Effect
`scaleX(1)`	Original width
`scaleX(2)`	2x width
`scaleX(0.5)`	Half width
`scaleX(-1)`	Flipped horizontally

scaleY() Values

Value	Effect
`scaleY(1)`	Original height
`scaleY(2)`	2x height
`scaleY(0.5)`	Half height
`scaleY(-1)`	Flipped vertically

scaleZ() Values

Value	Effect
`scaleZ(1)`	Original depth
`scaleZ(2)`	2x depth
`scaleZ(0.5)`	Half depth

Best Practices

✅ Do This:

/* Progress bar fills from left */
.progress-bar {
    transform-origin: left;
    transform: scaleX(0.75);
}

/* Bar chart grows from bottom */
.bar {
    transform-origin: bottom;
    transform: scaleY(0.8);
}

/* 3D cube pulses in depth */
.cube {
    transform-style: preserve-3d;
    transform: scaleZ(2);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .bar:hover {
        transform: none;
    }
}

❌ Don’t Do This:

/* Don't use scaleZ without perspective */
.box {
    transform: scaleZ(2); /* Won't be visible */
    /* Add perspective on the parent */
}

/* Don't scale too much */
.box:hover {
    transform: scaleX(5); /* Can cause overflow */
}

/* Don't forget transform-origin for bars */
.bar {
    transform: scaleY(2); /* Grows from center by default */
    /* Use transform-origin: bottom for upward growth */
}

Pro Tip: scaleX() and scaleY() are perfect for data visualization — use scaleY() with transform-origin: bottom for bar charts that grow upward, and scaleX() with transform-origin: left for progress bars that fill from the left. scaleZ() is your gateway to 3D depth effects — it changes how far apart the front and back faces of a 3D object are. Remember: scaleZ() requires perspective on the parent and transform-style: preserve-3d on the container to be visible. And always respect prefers-reduced-motion for users who are sensitive to animation!

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!