CSS에서 3D 녀석

4925 단어 CSSCSS3transform3d3D

perspective:100transform-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);
}

좋은 웹페이지 즐겨찾기