3D Transforms

3D transforms alter an element in a three-dimensional space. Still images simply do not capture what happens!

(Please note that the example in our textbook is quite incomplete; look at the full example in the download files).

Basic Steps

1. Make a space within which to rotate
2. Make a thing to rotate
3. Make the front and back of the thing.
4. Add a transform to rotate when the state changes.

Example

This is essentially the example from our textbook. Note that there are actually two examples combined here.

HTML

<div class="flipper">
    <span class="flipper-object flipper-vertical">
        <span class="panel front">The Front</span>
        <span class="panel back">The Back</span>
    </span>
</div>

<div class="flipper">
    <span class="flipper-object flipper-horizontal">
        <span class="panel front">The Front</span>
        <span class="panel back">The Back</span>
    </span>
</div>

CSS

.flipper {
    perspective: 400px;
    position: relative;
    width: 300px;
    height: 44px;
}

.flipper + .flipper {
    margin-top: 1em;
}

.flipper-object {
    position: absolute;
    width: 100%;
    height: 100%;
    transition: transform 1s;
    transform-style: preserve-3d;
}

.panel {
    display: flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    top: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    backface-visibility: hidden;
}

.flipper-vertical .back {
    transform: rotateX(180deg);
}

.flipper-horizontal .back {
    transform: rotateY(180deg);
}

.back {
    background-color: #CC3232;
}

.front {
    background-color: #739328;
}

.flipper:hover .flipper-vertical {
    transform: rotateX(180deg);
}

.flipper:hover .flipper-horizontal {
    transform: rotateY(180deg);
}