3d cube, rectangle, square, scss

3d-cube-rectangle-square-scss.markdown

3d cube, rectangle, square, scss

Animated 3d cube, it responses to the mouse moves

A Pen by Yevhenii Kamenskyi on CodePen.

License.

index.html

<div class="box">
  <div class="p1">œ</div>
  <div class="p2">∑</div>
  <div class="p3">å</div>
  <div class="p4">®</div>
  <div class="p5">†</div>
  <div class="p6">¥</div>
</div>
<div class="sh"></div>

script.js

var centerX = window.innerWidth / 2;
var centerY = window.innerHeight / 2;
var layers = document.querySelectorAll('.box > div');

function rotateTo(x, y){
  
 layers[0].style.transform = `rotateX(${y + 0}deg)   rotateY(${x + 90}deg)  rotateZ(${0}deg)`;
 layers[1].style.transform = `rotateX(${y + 0}deg)   rotateY(${x + 270}deg) rotateZ(${0}deg)`;
 layers[2].style.transform = `rotateX(${y + 90}deg)  rotateY(${0}deg)       rotateZ(${-x}deg)`;
 layers[3].style.transform = `rotateX(${y + -90}deg) rotateY(${0}deg)       rotateZ(${x}deg)`;
 layers[4].style.transform = `rotateX(${y + 0}deg)   rotateY(${x + 0}deg)   rotateZ(${0}deg)`;
 layers[5].style.transform = `rotateX(${y + 0}deg)   rotateY(${x + 180}deg) rotateZ(${0}deg)`;
  
};

document.body.addEventListener('mousemove', function(e){
  var x = (centerX - e.clientX) / centerX * 360,
      y = (centerY - e.clientY) / centerY * 360;
  
  rotateTo(x, y);
  
});

// autoplay
var apX = 0;
var apY = 0;
// comment below
setInterval(() => rotateTo(apX += 1, apY +=1), 60);

style.scss

$size:   150px; 
$colors: #73c25b #fdc333 #f99427 #e7524f #a856a9 #26aee3;

html, body{
  width:    100vw;
  height:   100vh;
  margin:   0;
  overflow: hidden;
}

body{
  font-family: 'Open Sans', sans-serif;
  background:  radial-gradient(rgba(#000,.3), #fff);
}

.box {
  position:        relative;
  width:           $size;
  height:          $size;
  margin:          $size auto; 
  transform-style: preserve-3d;
  perspective:     600px;
}

.box > div {
  position:    absolute;
  top:         0;
  left:        0;
  width:       $size;
  height:      $size;
  font-size:   5rem;
  font-weight: bold;
  color:       rgba(#fff, .4);
  display:         flex;
  align-items:     center;
  justify-content: center;
  opacity:         0.9;
  transform-origin: 50% 50% $size / -2;
}

@for $i from 1 through 6 {
  .p#{$i} {
    background: nth($colors, $i);
    box-shadow: inset 0 0 25px rgba(#fff, 0.2); 
  }
}

div.sh{
  background: radial-gradient(#000, rgba(#000,0));
  position:   absolute;
  top:        1.3 * $size;
  left:       0;
  right:      0;
  margin:     $size auto;
  width:      $size;
  height:     $size;
  filter:     blur(50px);
  z-index:    -1;
  transform:  rotateX(50deg) scaleY(0.7);
}