siha blog

HTML+CSS

CSSで立方体を作る

2019/09/30

基本的な考え方は単純。立方体を構成する6つの面を1面ずつtransformプロパティとposition: absolute;で動かす。

HTML↓

<div class="cube">
    <div class="front plane"></div>
    <div class="back plane"></div>
    <div class="top plane"></div>
    <div class="bottom plane"></div>
    <div class="left plane"></div>
    <div class="right plane"></div>
</div>

CSS↓

.cube {
    width: 200px; height: 200px;
    position: relative;
    margin: 100px auto;
    transform-style: preserve-3d;
    transform: rotateX(-20deg) rotateY(-20deg);
}
.plane {
    box-sizing: border-box;
    width: 200px; height: 200px;
    border: 1px solid #333;
    position: absolute;
    background-color: #8bf7ff;
    opacity: 0.6;
}
.front {
    top: 0;
    left: 0;
    transform: translateZ(100px);
}
.back {
    top: 0;
    left: 0;
    transform: translateZ(-100px);
}
.top {
    top: 100px;
    left: 0;
    transform: rotateX(90deg);
}
.bottom {
    bottom: 100px;
    left: 0;
    transform: rotateX(-90deg);
}
.left {
    top: 0;
    left: 100px;
    transform: rotateY(90deg);
}
.right {
    top: 0;
    right: 100px;
    transform: rotateY(-90deg);
}

軽く解説

まずtransform-style: preserve-3d;で子要素を3D空間に設置させるようにします。
次にtransform: translateZ();で奥と手前に、transform: rotateX,Y();で回転させposition: absolute;で上下左右に移動させる。
.cubeのtransformプロパティは立体であることが分かりやすいように少し回転させています。
@keyframesなどでくるくるさせると、より立方体であることが分かりやすいので是非試してみてください(CSSだけで出来ていると思うとなんとなく面白いです)

所感

1面ずつCSSで設定していかなければいけない面倒さはありますが、CSSの知識のみで簡単に作れます。CSSだけで立方体を作れると知ったときは驚きました。

立方体を利用したwebサイトはたまに見かけるので、上手く活かせると面白そうですね。

share

Profile

siha

web制作について勉強中の学生。