CSSで3Dなやつ

perspective:100とtransform-style:preserve-3dというのを知らずに困ってた。

<div class="canvas">
    <div class="space">
        <div class="measure x"></div>
        <div class="measure y"></div>
        <div class="measure z"></div>
        <div class="box">
            <div class="face face0">0</div>
            <div class="face face1">1</div>
            <div class="face face2">2</div>
            <div class="face face3">3</div>
            <div class="face face4">4</div>
            <div class="face face5">5</div>
            <div class="face face6">6</div>
        </div>
    </div>
</div>

.canvas {
    background-color: #eee;
    height: 100%;
    overflow: auto;
    -webkit-perspective: 500;
    position: relative;
    width: 100%;
}
.space {
    height: 400px;
    -webkit-transition: -webkit-transform .5s;
    -webkit-transform:
        rotateX(-10deg)
        rotateY(-10deg)
        rotateZ(0deg);
    -webkit-transform-style: preserve-3d;
    width: 400px;
}
.on .space {
    -webkit-transform:
        rotateX(-40deg)
        rotateY(30deg)
        rotateZ(0deg);
}
…