3d transformations css

beaautiful

by Darby Rathbone

HTML

<div class='container container--realistic'>
    <div class='cube'>
        <div class='face'>1</div>
        <div class='face'>2</div>
        <div class='face'>3</div>
        <div class='face'>4</div>
        <div class='face'>5</div>
        <div class='face'>6</div>
    </div>
</div>

CSS

body {
    width:100%;
}
table {
    width:100%;
}
td {
    text-align:center;
    width:25%;
}
.cube {
    margin:100px;
    position: absolute;
    width: 100px;
    height: 100px;
    -webkit-transform-style: preserve-3d;
    -webkit-transform: rotateY(50deg) rotateX(56deg);
    -webkit-transition-timing-function: linear;
    -webkit-transition-duration:200ms;
}
.face {
    background-color:RGBA(0, 0, 0, .25);
    text-align:center;
    color:RGBA(255, 255, 255, .5);
    line-height:100px;
    font-size:100px;
    border:dashed 1px RGBA(255, 255, 255, 1);
    position:fixed;
    width: 100%;
    height: 100%;
}
.container {
    -webkit-transform:translateX(-150px) translateY(-150px);
    -webkit-transition-timing-function: ease-out;
    -webkit-transition-duration:2000ms;
}
.face:nth-child(1) {
    transform: rotateY(0deg) translateZ(50px
    /* half the side length */
    );
    
    -webkit-transform: rotateY(0deg) translateZ(50px
    /* half the side length */
    );
}
.face:nth-child(2) {
    -webkit-transform: rotateY(90deg) translateZ(50px);
}
.face:nth-child(3) {
    -webkit-transform: rotateY(180deg) translateZ(50px);
}
.face:nth-child(4) {
    -webkit-transform: rotateY(270deg) translateZ(50px);
}
.face:nth-child(5) {
    -webkit-transform: rotateX(270deg) translateZ(50px);
}
.face:nth-child(6) {
    -webkit-transform: rotateX(90deg) translateZ(50px);
}

JavaScript

var text = document.createElement('table');
document.body.appendChild(text);
var b = [
    0,
    0
  ];
var a = document.getElementsByClassName('cube');
var containers = document.getElementsByClassName('container');
var s = '';
var f = document.getElementsByClassName('face');
//setInterval(recalculate, 100);
requestAnimationFrame(displaytables);
var mouse = [
    0,
    0
  ];
a[0].style['-webkit-transform'] = 'rotateY(0deg) rotateX(0deg)';
a[0].addEventListener('webkitTransitionEnd', function () {
    recalculate();
  if (!Boolean(b[0])) {
    b[0] = 1;
    b[1] = 0
  }
  a[0].style['-webkit-transform'] = 'rotateY(' + b[0] + 'deg) rotateX(' + b[1] + 'deg)';
  b[0] += 45
}, true);
window.onmousemove = function (c) {
  mouse[0] = c.pageX;
  mouse[1] = c.pageY
  
};
function displaytables() {
  text.innerHTML = '';
  printToTable(containers);
  printToTable(a);
  requestAnimationFrame(displaytables);
   // recalculate();
}
function recalculate(c) {
  containers[0].style.webkitTransform = ' translate(' + (mouse[0] - 150 | 0) + 'px, ' + (mouse[1] - 150 | 0) + 'px)'
}
function printToTable(c) {
  [].forEach.call(c, function (g) {
    s = window.getComputedStyle(g).webkitTransform;
    var e = s.split(/\(([^\)]+)\)/g)[1].split(',').map(parseFloat), d = [
        [],
        [],
        [],
        []
      ];
    e.forEach(function (j, h) {
      d[h % 4].push(j.toFixed(12))
    });
    text.innerHTML += d.map(function (h) {
      return '<tr><td>' + h.join('</td><td>') + '</td></tr>'
    }).join('')
  })
}