Matrix Transforms

How to use Matrix transforms.

We can use Matrix transforms in two major ways:

• We can manipulate points using a Matrix
• We can use a matrix as a transform in CSS

This page demonstrates various animation transforms using Matrix.

Mirroring

We can mirror two images by using a negative scale.

This can be done in CSS with the scale() function, which becomes a matrix().

To mirror points along X, we can use:

scale -1 1

This works horizontally and vertically

Quad Mirror

We can create a quad mirror effect by making four copies of an image.

.quad-top-left     { transform: matrix(-1, 0, 0, 1, 0, 0)}
.quad-top-right    { transform: matrix(1, 0, 0, 1, 0, 0)}
.quad-bottom-left  { transform: matrix(-1, 0, 0, -1, 0, 0)}
.quad-bottom-right { transform: matrix(1, 0, 0, -1, 0, 0)}

Transform animations

We can use transforms in CSS animations.

Just use @keyframes

@keyframes flip-x {
    from {
        transform: matrix(1, 0, 0, 1, 0, 0)
    }
    to {
        transform: matrix(-1, 0, 0, 1, 0, 0)
    }
}
.flip-x {
    animation-name: flip-x;
    animation-duration: 3.6s;
    animation-iteration-count: infinite;
}
@keyframes back-flip-x {
    from {
        transform: matrix(-1, 0, 0, 1, 0, 0)
    }
    to {
        transform: matrix(1, 0, 0, 1, 0, 0)
    }
}
.back-flip-x {
    animation-name: back-flip-x;
    animation-duration: 3.6s;
    animation-iteration-count: infinite;
}