CSSでCODEPENのロゴをつくる

つくってみました。3Dでつくって視点を回転させています。

DEMO

See the Pen CODEPEN by kimmy (@kimmy) on CodePen.

HTML

<ol class="box">
  <li class="surface front"></li>
  <li class="surface back"></li>
  <li class="surface left"></li>
  <li class="surface right"></li>
</ol>

SCSS

$size: 100px;

html {
  width: 100%; height: 100%;
}

body {
  position: relative;
  width: 100%; height: 100%;
  color: #fff;
  background: #191919;
  overflow: hidden;
}

.box {
  position: absolute;
  top: 0; bottom: 0;
  left: 0; right: 0;
  margin: auto;
  width: $size; height: $size / 2;
  transform-style: preserve-3d;
  transform: rotateX(-35deg) rotateY(45deg) scale(1);
}

.surface {
  position: absolute;
  border: solid 6px;
  border-left: none;
  border-radius: 6px;
  width: $size; height: $size;
  
  &.front {
    height: $size / 2;
    transform: translateZ(-$size / 2);
  }
  
  &.back {
    height: $size / 2;
    transform: rotateY(180deg) translateZ(-$size / 2);
  }
  
  &.left {
    height: $size / 2;
    transform: rotateY(90deg) translateZ(-$size / 2);
  }
  
  &.right {
    height: $size / 2;
    transform: rotateY(-90deg)  translateZ(-$size / 2);
  }
}