パースビューで3 D練習
HTML
<div class="perspective">
<div class="top-box">
<div class="middle-box">
<div class="bottom-box"></div>
</div>
</div>
</div>CSS
.perspective{
width: 200px;
height: 200px;
perspective: 500px;
padding: 70px;
}
.top-box{
width: 200px;
height: 200px;
border: red solid 3px;
transform: rotateX(45deg);
transform-style: preserve-3d;
}
.middle-box{
width: 200px;
height: 200px;
border: blue solid 3px;
transform: rotateX(-45deg);
transform-style: preserve-3d;
}
.bottom-box{
width: 200px;
height: 200px;
border: green solid 3px;
transform: rotateY(45deg);
}
Reference
この問題について(パースビューで3 D練習), 我々は、より多くの情報をここで見つけました https://velog.io/@cash2cash/perspective를-통한-3D-연습テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol