【CSS】perspective と transform-style で3D表現。立方体を作ってみよう。

perspectiveとtransform-style

perspectiveとは

perspectiveと言う語は、遠近法という意味で、CSSでは要素の奥行きを表します。

この値が大きいほど、形のゆがみは少なくなります。奥行きが広くなるので、遠くからその要素を見るからです。

HTML <div class="p100">
<div class="block">perspective:100px</div>
</div>
<div class="p500">
<div class="block1">perspective:500px</div>
</div>
<div class="p900">
<div class="block2">perspective:900px</div>
</div>
<div class="p1300">
<div class="block3">perspective:1300px</div>
</div>
CSS .block, .block1, .block2, .block3{
width: 300px;
height: 100px;
background: rgb(151, 4, 4);
transform: rotateY(-50deg);
margin: 20px;
}
.p100{
perspective: 100px;
}
.p500{
perspective: 500px;
}
.p900{
perspective: 900px;
}
.p1300{
perspective: 1300px;
}

transform-style

transform-style:flat は、要素を平面に配置します。

transform-style:preserve-3dは、要素を3D空間に配置します。

これだけではよくわからないので、perspective500pxをあてると、、、

transform-style:preserve-3dを記述しても、perspctiveを記述しないと、３D表現はできないということです。

HTML <div class="trfm">
<div class="block4"></div>
<div class="block5"></div>
</div> CSS .trfm{
position: relative;
height: 150px;
perspective: 500px;
transform-style: preserve-3d;
}
.block4{
width: 300px;
height: 100px;
background: rgb(0, 0, 119);
position: absolute;
transform: rotateY(50deg);
}
.block5{
width: 300px;
height: 30px;
background: rgb(179, 117, 2);
position: absolute;
transform: rotateY(-50deg) translateY(30px);
}

立方体を作ってみよう！

立方体を作っても、perspectiveとtransform-style:preserve-3dを当てないと、、、

こうなってしまいます。

では、perspectiveとtransform-style:preserve-3dを記述してみましょう。立方体がより見やすいように、perspective-origin:150% 150%も記述しています。これは視点を、左へ150%、上へ 150%移動させた位置から見ています。

HTML

                
                <div class="wrapper"> 

                    <div class="card"> 

                        <div class="face top1">Top</div> 

                        <div class="face bottom">Bottom</div> 

                        <div class="face front">Front</div> 

                        <div class="face rear">Rear</div> 

                        <div class="face right">Right</div> 

                        <div class="face left">Left</div> 

                    </div> 

                </div>
            

CSS .wrapper{
position: relative;
width: 100%;
}
.wrapper .card{
position: relative;
height: 100px;
width: 100px;
transform-style: preserve-3d; */
perspective: 500px;
perspective-origin: -150% -150%;
}
.card .face{
background: rgba(170, 170, 170, 0.692);
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 70px;
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
border: solid 1px black;
}
.card .face:nth-child(1){
transform: rotateX(-270deg) translateZ(50px);
}
.card .face:nth-child(2){
transform: rotateX(-90deg) translateZ(50px);
}
.card .face:nth-child(3){
transform: translateZ(50px);
}
.card .face:nth-child(4){
transform: rotateX(-180deg) translateZ(50px);
}
.card .face:nth-child(5){
transform: rotateY(-90deg) translateZ(50px);
}
.card .face:nth-child(6){
transform: rotateY(90deg) translateZ(50px);
}

応用編

perspectiveとtransform-style:preserve-3dを使って、以下のような表現ができます。いずれも、Javascriptは使っていません。

まとめ

perspectiveとtransform-style:preserve-3dの解説をしました。この二つを駆使して、３D表現をしてみましょう。ウェブページがグッとおしゃれになります。