CSS에서 3D 녀석
4925 단어 CSSCSS3transform3d3D
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);
}
…
Reference
이 문제에 관하여(CSS에서 3D 녀석), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/ginpei/items/f9dace46c93c76a4cb4e텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)