CSS 46 💻 transform matrix and matrix3d - KandZ

The matrix() and matrix3d() functions are the most powerful — and most complex — transform functions in CSS. They let you apply exact mathematical transformations using matrices.

Overview

Function	Dimensions	Matrix Size	Values
`matrix()`	2D	3×3 (6 values)	`a, b, c, d, e, f`
`matrix3d()`	3D	4×4 (16 values)	`a` through `p`

1. matrix() — 2D Transformations

The matrix() function applies a 2D transformation using a 3×3 matrix (represented by 6 values).

.box {
    transform: matrix(a, b, c, d, e, f);
}

Matrix Structure

| a  c  e |
| b  d  f |
| 0  0  1 |

Value	Controls	Description
`a`	Scale X	Horizontal scaling
`b`	Skew Y	Vertical skew
`c`	Skew X	Horizontal skew
`d`	Scale Y	Vertical scaling
`e`	Translate X	Horizontal movement
`f`	Translate Y	Vertical movement

2D Matrix Examples

Translation

.translated {
    transform: matrix(1, 0, 0, 1, 100, 100);
}

a=1, d=1 → No scaling
b=0, c=0 → No skewing
e=100, f=100 → Move 100px right and down

Equivalent to: translate(100px, 100px)

Rotation (45°)

.rotated {
    transform: matrix(0.707, 0.707, -0.707, 0.707, 0, 0);
}

0.707 = cos(45°) ≈ sin(45°)
a=cos(θ), b=sin(θ), c=-sin(θ), d=cos(θ)

Equivalent to: rotate(45deg)

Scaling and Skewing

.transformed {
    transform: matrix(1, 0.3, -0.3, 1, 0, 0);
}

a=1, d=1 → No scaling
b=0.3 → Skew Y by ~16.7°
c=-0.3 → Skew X by ~-16.7°

Equivalent to: skew(16.7deg, -16.7deg)

2. matrix3d() — 3D Transformations

The matrix3d() function applies a 3D transformation using a 4×4 matrix (16 values).

.box {
    transform: matrix3d(
        a, b, c, d,
        e, f, g, h,
        i, j, k, l,
        m, n, o, p
    );
}

Matrix Structure

| a  e  i  m |
| b  f  j  n |
| c  g  k  o |
| d  h  l  p |

Group	Values	Controls
Linear transformation	`a, b, c, e, f, g, i, j, k`	Scale, rotate, skew
Translation	`m, n, o`	X, Y, Z movement
Perspective	`d, h, l`	Perspective effects
Homogeneous	`p`	Usually `1`

3D Matrix Examples

3D Rotation (45° around Y axis)

.rotated3d {
    transform: matrix3d(
        cos(45deg), 0, sin(45deg), 0,
        0, 1, 0, 0,
        -sin(45deg), 0, cos(45deg), 0,
        0, 0, 0, 1
    );
}

Rotates around the Y axis
cos(45°) and sin(45°) create the rotation

Equivalent to: rotateY(45deg)

3D Scaling and Translation

.transformed3d {
    transform: matrix3d(
        2, 0, 0, 0,
        0, 2, 0, 0,
        0, 0, 1, 0,
        100, 100, 0, 1
    );
}

a=2, f=2 → Scale 2x in X and Y
m=100, n=100 → Move 100px right and down

Equivalent to: translate(100px, 100px) scale(2, 2)

3D Skewing

.skewed {
    transform: matrix3d(
        1, 0.3, 0, 0,
        -0.3, 1, 0, 0,
        0, 0, 1, 0,
        0, 0, 0, 1
    );
}

b=0.3 → Skew Y
e=-0.3 → Skew X

Equivalent to: skew(16.7deg, -16.7deg)

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 matrix() and matrix3d()</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: 40px 20px;
            background: #e9ecef;
            border-radius: 8px;
            margin: 15px 0;
            min-height: 300px;
            perspective: 800px;
        }

        .box {
            width: 100px;
            height: 100px;
            background: linear-gradient(135deg, #28a745, #20c997);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-size: 0.8rem;
            border-radius: 8px;
            transition: transform 0.5s ease-in-out;
            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(40, 167, 69, 0.4);
        }

        /* 2D Matrix transforms */
        .translated {
            transform: matrix(1, 0, 0, 1, 100, 100);
        }

        .translated:hover {
            transform: matrix(1, 0, 0, 1, 150, 50);
        }

        .rotated {
            transform: matrix(0.707, 0.707, -0.707, 0.707, 0, 0);
        }

        .rotated:hover {
            transform: matrix(0.707, 0.707, -0.707, 0.707, 50, 50);
        }

        .transformed {
            transform: matrix(1, 0.3, -0.3, 1, 0, 0);
        }

        .transformed:hover {
            transform: matrix(1.2, 0.5, -0.5, 1.2, 20, 20);
        }

        /* 3D Matrix transforms */
        .rotated3d {
            transform: matrix3d(
                cos(45deg), 0, sin(45deg), 0,
                0, 1, 0, 0,
                -sin(45deg), 0, cos(45deg), 0,
                0, 0, 0, 1
            );
        }

        .rotated3d:hover {
            transform: matrix3d(
                cos(90deg), 0, sin(90deg), 0,
                0, 1, 0, 0,
                -sin(90deg), 0, cos(90deg), 0,
                0, 0, 0, 1
            );
        }

        .transformed3d {
            transform: matrix3d(
                2, 0, 0, 0,
                0, 2, 0, 0,
                0, 0, 1, 0,
                100, 100, 0, 1
            );
        }

        .transformed3d:hover {
            transform: matrix3d(
                2.5, 0, 0, 0,
                0, 2.5, 0, 0,
                0, 0, 1, 0,
                50, 50, 0, 1
            );
        }

        .skewed {
            transform: matrix3d(
                1, 0.3, 0, 0,
                -0.3, 1, 0, 0,
                0, 0, 1, 0,
                0, 0, 0, 1
            );
        }

        .skewed:hover {
            transform: matrix3d(
                1, 0.5, 0, 0,
                -0.5, 1, 0, 0,
                0, 0, 1, 0,
                0, 0, 0, 1
            );
        }

        /* ====== COMPARISON GRID ====== */
        .comparison-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 20px;
            margin: 15px 0;
        }

        .comparison-card {
            background: white;
            border: 2px solid #ddd;
            border-radius: 8px;
            padding: 20px;
            text-align: center;
            transition: all 0.3s;
        }

        .comparison-card:hover {
            border-color: #007bff;
            box-shadow: 0 4px 15px rgba(0, 123, 255, 0.15);
        }

        .comparison-card h4 {
            margin-top: 0;
            color: #007bff;
        }

        .comparison-card .matrix-display {
            background: #1e1e1e;
            color: #d4d4d4;
            padding: 10px;
            border-radius: 6px;
            font-family: 'Courier New', monospace;
            font-size: 0.75rem;
            margin: 10px 0;
            white-space: pre;
            text-align: left;
            overflow-x: auto;
        }

        /* ====== MATRIX VISUALIZATION ====== */
        .matrix-viz {
            display: flex;
            gap: 20px;
            flex-wrap: wrap;
            justify-content: center;
            margin: 20px 0;
        }

        .matrix-box {
            display: grid;
            grid-template-columns: repeat(3, 50px);
            gap: 5px;
            padding: 15px;
            background: #f8f9fa;
            border-radius: 8px;
            border: 2px solid #ddd;
        }

        .matrix-box .cell {
            width: 50px;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #007bff;
            color: white;
            border-radius: 4px;
            font-weight: bold;
            font-size: 0.8rem;
        }

        .matrix-box .cell.highlight {
            background: #ffc107;
            color: #333;
        }

        .matrix-box .cell.scale {
            background: #28a745;
        }

        .matrix-box .cell.skew {
            background: #dc3545;
        }

        .matrix-box .cell.translate {
            background: #6c5ce7;
        }

        /* ====== 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 matrix() and matrix3d()</h1>

    <!-- ====== 1. MATRIX() DEMO ====== -->
    <section>
        <h2>1. matrix() — 2D Transformations</h2>
        <p>The <code>matrix()</code> function applies a 2D transformation using 6 values.</p>

        <div class="demo-area">
            <div class="box translated">matrix<br>Translate</div>
            <div class="box rotated">matrix<br>Rotate</div>
            <div class="box transformed">matrix<br>Skew + Scale</div>
        </div>

        <p class="note">Hover over each box to see the transform change!</p>

        <div class="code-block">
            /* Translation: move 100px right and down */
            .translated {
                transform: matrix(1, 0, 0, 1, 100, 100);
            }

            /* Rotation: 45 degrees */
            .rotated {
                transform: matrix(0.707, 0.707, -0.707, 0.707, 0, 0);
            }

            /* Skew + Scale */
            .transformed {
                transform: matrix(1, 0.3, -0.3, 1, 0, 0);
            }
        </div>
    </section>

    <!-- ====== 2. MATRIX3D() DEMO ====== -->
    <section>
        <h2>2. matrix3d() — 3D Transformations</h2>
        <p>The <code>matrix3d()</code> function applies a 3D transformation using 16 values.</p>

        <div class="demo-area">
            <div class="box rotated3d">matrix3d<br>Rotate Y</div>
            <div class="box transformed3d">matrix3d<br>Scale + Translate</div>
            <div class="box skewed">matrix3d<br>Skew</div>
        </div>

        <div class="code-block">
            /* 3D Rotation around Y axis */
            .rotated3d {
                transform: matrix3d(
                    cos(45deg), 0, sin(45deg), 0,
                    0, 1, 0, 0,
                    -sin(45deg), 0, cos(45deg), 0,
                    0, 0, 0, 1
                );
            }

            /* 3D Scale + Translate */
            .transformed3d {
                transform: matrix3d(
                    2, 0, 0, 0,
                    0, 2, 0, 0,
                    0, 0, 1, 0,
                    100, 100, 0, 1
                );
            }

            /* 3D Skew */
            .skewed {
                transform: matrix3d(
                    1, 0.3, 0, 0,
                    -0.3, 1, 0, 0,
                    0, 0, 1, 0,
                    0, 0, 0, 1
                );
            }
        </div>
    </section>

    <!-- ====== 3. MATRIX VISUALIZATION ====== -->
    <section>
        <h2>3. Matrix Structure Visualization</h2>

        <h3>2D Matrix (3×3)</h3>
        <div class="matrix-viz">
            <div class="matrix-box">
                <div class="cell scale">a</div>
                <div class="cell skew">c</div>
                <div class="cell translate">e</div>
                <div class="cell skew">b</div>
                <div class="cell scale">d</div>
                <div class="cell translate">f</div>
                <div class="cell">0</div>
                <div class="cell">0</div>
                <div class="cell highlight">1</div>
            </div>
            <div style="max-width: 300px;">
                <p><strong>a, d</strong> — Scale X and Y</p>
                <p><strong>b, c</strong> — Skew Y and X</p>
                <p><strong>e, f</strong> — Translate X and Y</p>
            </div>
        </div>

        <div class="code-block">
            /* 2D matrix structure */
            transform: matrix(a, b, c, d, e, f);

            /* Represented as:
               | a  c  e |
               | b  d  f |
               | 0  0  1 |
            */
        </div>
    </section>

    <!-- ====== 4. COMPARISON ====== -->
    <section>
        <h2>4. matrix() vs matrix3d()</h2>

        <div class="comparison-grid">
            <div class="comparison-card">
                <h4>matrix()</h4>
                <div class="matrix-display">| a  c  e |
| b  d  f |
| 0  0  1 |</div>
                <p><strong>6 values</strong></p>
                <p>2D transformations</p>
                <p>Scale, rotate, skew, translate</p>
            </div>

            <div class="comparison-card">
                <h4>matrix3d()</h4>
                <div class="matrix-display">| a  e  i  m |
| b  f  j  n |
| c  g  k  o |
| d  h  l  p |</div>
                <p><strong>16 values</strong></p>
                <p>3D transformations</p>
                <p>Adds Z-axis and perspective</p>
            </div>
        </div>
    </section>

    <!-- ====== 5. FUNCTION EQUIVALENTS ====== -->
    <section>
        <h2>5. Function Equivalents</h2>
        <p>Many transform functions are shortcuts for matrix values.</p>

        <table class="reference-table">
            <tr>
                <th>Function</th>
                <th>Matrix Equivalent</th>
            </tr>
            <tr>
                <td><code>translate(100px, 50px)</code></td>
                <td><code>matrix(1, 0, 0, 1, 100, 50)</code></td>
            </tr>
            <tr>
                <td><code>scale(2, 2)</code></td>
                <td><code>matrix(2, 0, 0, 2, 0, 0)</code></td>
            </tr>
            <tr>
                <td><code>rotate(45deg)</code></td>
                <td><code>matrix(0.707, 0.707, -0.707, 0.707, 0, 0)</code></td>
            </tr>
            <tr>
                <td><code>skew(30deg, 0)</code></td>
                <td><code>matrix(1, 0, 0.577, 1, 0, 0)</code></td>
            </tr>
            <tr>
                <td><code>rotateY(45deg)</code></td>
                <td><code>matrix3d(cos(45deg), 0, sin(45deg), 0, 0, 1, 0, 0, -sin(45deg), 0, cos(45deg), 0, 0, 0, 0, 1)</code></td>
            </tr>
        </table>

        <div class="code-block">
            /* These are equivalent */
            transform: translate(100px, 50px);
            transform: matrix(1, 0, 0, 1, 100, 50);

            /* These are equivalent */
            transform: scale(2, 2);
            transform: matrix(2, 0, 0, 2, 0, 0);

            /* These are equivalent */
            transform: rotate(45deg);
            transform: matrix(0.707, 0.707, -0.707, 0.707, 0, 0);
        </div>
    </section>

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

        <h3>matrix() Values</h3>
        <table class="reference-table">
            <tr>
                <th>Value</th>
                <th>Controls</th>
                <th>Description</th>
            </tr>
            <tr>
                <td><code>a</code></td>
                <td>Scale X</td>
                <td>Horizontal scaling</td>
            </tr>
            <tr>
                <td><code>b</code></td>
                <td>Skew Y</td>
                <td>Vertical skew</td>
            </tr>
            <tr>
                <td><code>c</code></td>
                <td>Skew X</td>
                <td>Horizontal skew</td>
            </tr>
            <tr>
                <td><code>d</code></td>
                <td>Scale Y</td>
                <td>Vertical scaling</td>
            </tr>
            <tr>
                <td><code>e</code></td>
                <td>Translate X</td>
                <td>Horizontal movement</td>
            </tr>
            <tr>
                <td><code>f</code></td>
                <td>Translate Y</td>
                <td>Vertical movement</td>
            </tr>
        </table>

        <h3>matrix3d() Value Groups</h3>
        <table class="reference-table">
            <tr>
                <th>Group</th>
                <th>Values</th>
                <th>Controls</th>
            </tr>
            <tr>
                <td><strong>Linear</strong></td>
                <td><code>a, b, c, e, f, g, i, j, k</code></td>
                <td>Scale, rotate, skew</td>
            </tr>
            <tr>
                <td><strong>Translation</strong></td>
                <td><code>m, n, o</code></td>
                <td>X, Y, Z movement</td>
            </tr>
            <tr>
                <td><strong>Perspective</strong></td>
                <td><code>d, h, l</code></td>
                <td>Perspective effects</td>
            </tr>
            <tr>
                <td><strong>Homogeneous</strong></td>
                <td><code>p</code></td>
                <td>Usually <code>1</code></td>
            </tr>
        </table>
    </section>

    <!-- ====== 7. BEST PRACTICES ====== -->
    <section>
        <h2>7. 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>matrix()</code> for complex 2D transformations</li>
                <li>Use <code>matrix3d()</code> for 3D transformations and perspective</li>
                <li>Use transform functions (<code>rotate()</code>, <code>scale()</code>) for simplicity</li>
                <li>Use matrix when you need precise control over all values</li>
                <li>Remember that `a, d` control scale and `e, f` control translation</li>
                <li>Test matrix transformations in different browsers</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>matrix()</code> when <code>translate()</code> or <code>scale()</code> is clearer</li>
                <li>Don't manually calculate matrices if you can use simpler functions</li>
                <li>Don't forget that <code>matrix3d()</code> requires 16 values</li>
                <li>Don't mix up the order of matrix values</li>
                <li>Don't use matrix transformations without understanding them</li>
            </ul>
        </div>

        <div class="tip-box warning">
            <strong>⚠️ When to Use Matrix:</strong>
            Use <code>matrix()</code> and <code>matrix3d()</code> only when you need to apply a
            transformation that can't be achieved with simpler functions, or when you're
            generating transformations programmatically (e.g., in JavaScript).
        </div>
    </section>

</body>
</html>

Quick Reference

Function	Values	Matrix Size
`matrix()`	`a, b, c, d, e, f`	3×3 (2D)
`matrix3d()`	16 values (`a` through `p`)	4×4 (3D)

matrix() Values

Value	Controls	Description
`a`	Scale X	Horizontal scaling
`b`	Skew Y	Vertical skew
`c`	Skew X	Horizontal skew
`d`	Scale Y	Vertical scaling
`e`	Translate X	Horizontal movement
`f`	Translate Y	Vertical movement

matrix3d() Value Groups

Group	Values	Controls
Linear	`a, b, c, e, f, g, i, j, k`	Scale, rotate, skew
Translation	`m, n, o`	X, Y, Z movement
Perspective	`d, h, l`	Perspective effects
Homogeneous	`p`	Usually `1`

Function Equivalents

Function	Matrix Equivalent
`translate(100px, 50px)`	`matrix(1, 0, 0, 1, 100, 50)`
`scale(2, 2)`	`matrix(2, 0, 0, 2, 0, 0)`
`rotate(45deg)`	`matrix(0.707, 0.707, -0.707, 0.707, 0, 0)`

Best Practices

✅ Do This:

/* Use simpler functions when possible */
.box {
    transform: rotate(45deg) scale(1.5) translate(20px, 10px);
}

/* Use matrix() for complex 2D transforms */
.box {
    transform: matrix(1, 0.3, -0.3, 1, 100, 50);
}

/* Use matrix3d() for 3D transforms */
.box {
    transform: matrix3d(
        1, 0, 0, 0,
        0, 1, 0, 0,
        0, 0, 1, 0,
        50, 50, 0, 1
    );
}

❌ Don’t Do This:

/* Don't use matrix when a simple function works */
.box {
    transform: matrix(1, 0, 0, 1, 100, 50);
    /* Use translate(100px, 50px) instead */
}

/* Don't forget the 16 values in matrix3d */
.box {
    transform: matrix3d(1, 0, 0, 0); /* Invalid! */
}

/* Don't mix up matrix value order */
.box {
    transform: matrix(0, 1, 1, 0, 100, 50); /* Wrong order! */
}

Pro Tip: matrix() and matrix3d() are the low-level API of CSS transforms. Most of the time, you should use the simpler functions (rotate(), scale(), translate(), skew()) — they’re easier to read and maintain. Use matrix() when you need precise control over all transformation values, or when you’re generating transforms programmatically with JavaScript. Remember: matrix() uses 6 values (a, b, c, d, e, f), while matrix3d() uses 16 values for full 3D transformations. The order matters — always double-check your matrix values!

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!

Overview

1. matrix() — 2D Transformations

Matrix Structure

2D Matrix Examples

Translation

Rotation (45°)

Scaling and Skewing

2. matrix3d() — 3D Transformations

Matrix Structure

3D Matrix Examples

3D Rotation (45° around Y axis)

3D Scaling and Translation

3D Skewing

Complete Example

Quick Reference

matrix() Values

matrix3d() Value Groups

Function Equivalents

Best Practices

Ads Blocker Detected!!!