코드스피츠 4강 과제

cube.html

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

cube.scss

$corner-length: 500;
$corner-image-size: ceil($corner-length * 1.01);

@function getUnitValue($value, $unit) {
  @return "" + $value + $unit;
}

@mixin getPosition($corner-len, $x, $y) {
  background-position: #{getUnitValue(($corner-len * $x), 'px')} #{getUnitValue(($corner-len * $y), 'px')} ;
}

$size: #{getUnitValue($corner-length, 'px')};

$size-up: #{getUnitValue($corner-length + 1, 'px')};
$r: ($corner-length / 2);
body {
  margin: 0;
  perspective: $corner-length + px;
  width: $size;
  height: $size;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  top: calc(50% - ($corner-length / 2 + px));
}

@keyframes rotation {
  from {
     transform: translateZ($r + px) rotateY(0);
  }
  to {
     transform: translateZ($r + px) rotateY(-360deg);
  }
}


.cube {
  position: relative;
  width: $size-up;
  height: $size-up;
  transform-style: preserve-3d;
  transform: translateZ($r + px);
  animation: rotation 4s linear infinite;
  
  .front, 
  .back,
  .left,
  .top,
  .bottom,
  .right {
    background: url('http://paulbourke.net/miscellaneous/cubemaps/cube.jpg');
    width: 100%;
    height: 100%;
    background-size: #{getUnitValue(($corner-image-size) * 4, 'px')} #{getUnitValue($corner-image-size * 3, 'px')};
    position: absolute;
    opacity: 1;
  }
  
  .front {
    @include getPosition($corner-image-size, -1, -1);
    transform: scaleX(-1) rotateY(0deg) translateZ($r + px) ;

  }
  .back {
    @include getPosition($corner-image-size, -3, -1);
    transform: scaleX(-1) rotateY(180deg) translateZ($r + px);
  }
  .left {
    @include getPosition($corner-image-size, 0, -1);
    transform: scaleX(-1) rotateY(-90deg) translateZ($r + px);
  }
  .right {
    @include getPosition($corner-image-size, -2, -1);
    transform: scaleX(-1) rotateY(90deg) translateZ($r + px);
  }
  .top {
    @include getPosition($corner-image-size, -1, 0);
    transform: scaleX(-1) rotateX(90deg) translateZ($r + px);
  }
  .bottom {
    @include getPosition($corner-image-size, -1, -2);
    transform: scaleX(-1) rotateX(-90deg) translateZ($r + px);
  }
}

jsfiddle

항상 좋은내용 배워갑니다. 감사합니다.

100점 입니다.