みかづきブログ その3

3ヶ月つづけてみました。

CSSで立方体を書く

DEMO

See the Pen Box 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>
  <li class="surface top"></li>
  <li class="surface bottom"></li>
</ol>

SCSS

$size: 200px;

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

body {
  position: relative;
  width: 100%; height: 100%;
  color: #9cd1f6;
  background: #0b161c;
}

.box {
  position: absolute;
  top: 0; bottom: 0;
  left: 0; right: 0;
  margin: auto;
  width: $size; height: $size;
  transform-style: preserve-3d;
  animation: swing 5s ease-in-out infinite alternate;
}

.surface {
  position: absolute;
  border: solid 2px;
  width: $size; height: $size;
  font: 20px "HelveticaNeue-UltraLight";
  text-align: center;
  line-height: $size;
  cursor: pointer;
  transition: all .2s ease-in-out;
  text-shadow: 0 0 10px #86ceee;
  box-shadow: 0 0 10px #86ceee;
  
  &.front {
    transform: translateZ(-$size / 2);
  }
  
  &.back {
    transform: rotateY(180deg) translateZ(-$size / 2);
  }
  
  &.left {
    transform: rotateY(90deg) translateZ(-$size / 2);
  }
  
  &.right {
    transform: rotateY(-90deg)  translateZ(-$size / 2);
  }
  
  &.top {
    transform: rotateX(-90deg) translateZ(-$size / 2);
  }
  
  &.bottom {
    transform: rotateX(90deg) rotateY(180deg) translateZ($size / 2);
  }
}

@keyframes swing {
  0% {
    transform: rotateX(0deg) rotateY(0deg) scale(1);
  }
    
  5% {
    transform: rotateX(5deg) rotateY(5deg) rotateZ(5deg);
  }
    
  10% {
    transform: rotateX(15deg) rotateY(-5deg);
  }
  
  50% {
    transform: rotateX(5deg) rotateY(95deg) rotateZ(185deg);
  }
  
  90% {
    transform: rotateX(-15deg) rotateY(185deg);
  }
    
  95% {
    transform: rotateX(-5deg) rotateY(175deg) rotateZ(365deg);
  }
    
  100% {
    transform: rotateX(0deg) rotateY(180deg) rotateZ(360deg);
  }
}