Zenn
🧊

18行のCSSで作る立方体

2021/06/26に公開
CSS
tech

はじめに

微妙にすごそうに見える行数で立方体が作れました

完成品

CSS
.cube {
  display: grid;
  transform-style: preserve-3d;
  transform: rotateX(30deg) rotateY(30deg);
}

.cube__side {
  padding: 50px;
  grid-area: 1/ 1;
  box-shadow: inset 0 0 0 1px #000;
  transform: rotateX(var(--x, 0deg)) rotateY(var(--y, 0deg)) translateZ(var(--z, 50px));
}

.cube__side:nth-of-type(3n + 1) {--x: 90deg}

.cube__side:nth-of-type(3n + 2) {--y: 90deg}

.cube__side:nth-of-type(even) {--z: -50px}

雑な解説

枠線にborderを使わない

枠線にborderプロパティを使用すると数値を大きくした際に形が崩れるため、box-shadowを使用した

最後の三行

下記のCSSをいい感じに圧縮してコンパクトにしました。

.cube__side {
  padding: 50px;
  grid-area: 1/ 1;
  box-shadow: inset 0 0 0 1px #000;
  transform: translateZ(var(--z, 50px));
}

.cube__side:nth-of-type(1),
.cube__side:nth-of-type(4) {
  transform: rotateX(90deg)  translateZ(var(--z, 50px));
}

.cube__side:nth-of-type(2),
.cube__side:nth-of-type(5) {
  transform: rotateY(90deg)  translateZ(var(--z, 50px));
}

.cube__side:nth-of-type(2),
.cube__side:nth-of-type(4),
.cube__side:nth-of-type(6) {
  --z: -50px
}

おわりに

今回div内に文字がないためpaddingを使用しましたが、文字を入れるならwidth、heightを使用してください。

Discussion