JSFiddle - React, Tailwind, and code Playground

by rohanbhangui

HTML

<!DOCTYPE html>

<html>
<head>
  <title>CSS3D Impress</title>
  
  <script type="text/javascript" src="jquery-1.9.1.js"></script>
  <script type="text/javascript" src="jquery-migrate-1.1.0.js"></script>

  <script type="text/javascript" src="base.js"></script>
  <link rel="stylesheet" media="screen" type="text/css" href="base.css"/>

<!--   <link rel="shortcut icon" href="images/favicon.ico" /> -->

</head>
<body id="main">
  <div class="container">
    <div class="cube" id="cube1">
      This is cube1
    </div>
    <div class="cube" id="cube2">
      this is cube2
    </div>
    <div class="cube" id="cube3">
      this is cube3
    </div>
    <div class="cube" id="cube4">
      this is cube4
    </div>
  </div>
</body>
</html>

CSS

* {
  padding: 0px;
  margin: 0px;
}

.container {
  width: inherit;
  height: inherit;
  position: absolute;
  margin: 0px;
  border: 2px solid #000;
}

.container {
      /* Firefox */
  -moz-transition: all 1s ease;
  /* WebKit */
  -webkit-transition: all 1s ease;
  /* Opera */
  -o-transition: all 1s ease;
  /* Standard */
  transition: all 1s ease;
}

body {
  overflow: hidden;
}

#cube1 {
  margin: auto;
  left: 100px;
  top: 100px;
  width: 200px;
  height: 200px;
  display: block;
  position: fixed;
  background-color: red;
}

#cube2 {
  margin: auto;
  left: 1000px;
  top: 100px;
  width: 200px;
  height: 200px;
  display: block;
  position: fixed;
  background-color: orange;
}

#cube3 {
  margin: auto;
  left: 500px;
  top: 800px;
  width: 200px;
  height: 200px;
  display: block;
  position: fixed;
  background-color: yellow;
}

#cube4 {
  margin: auto;
  left: 800px;
  top: 500px;
  width: 200px;
  height: 200px;
  display: block;
  position: fixed;
  background-color: green;
}







.rotate {
  /* Firefox */
  -moz-transform: scale(2) rotate(-30deg) translate(200px);
  /* WebKit */
  -webkit-transform: scale(1.2) rotate(-30deg) translate(200px);
  /* Opera */
  -o-transform: scale(2) rotate(-30deg) translate(200px);
  /* Standard */
  transform: scale(2) rotate(-30deg) translate(200px);
  
  z-index: 1000;

}

.up {
  /* Firefox */
  -moz-transform: scale(10) translate(0,200px);
  /* WebKit */
  -webkit-transform: scale(10) translate(0,200px);
  /* Opera */
  -o-transform: scale(10) translate(0,200px);
  /* Standard */
  transform: scale(10) translate(0,200px);
  
  z-index: 1000;

}

.down {
  -moz-transform: skew(0,-30deg);
  transform: skew(0,-30deg);
  -ms-transform: skew(0,-30deg); /* IE 9 */
  -webkit-transform: skew(0,-30deg); /* Safari and Chrome */
  -o-transform: skew(0,-30deg);
}

JavaScript

/*TODO: I need to center the focusBox to the center of the screen
        currently it happens for the first box but for the following boxes I have a feeling it isn't being centered
        the last box confirms these suspicions
    
        also if I proceed too quickly with my right arrow button presses the positioning is completely offs
*/

var currentBoxNum = 1; // keeps track of current box
var translateXOld = window.innerWidth/2;
var translateYOld = window.innerHeight/2;
var focusBox = "#cube" + currentBoxNum; //creates a variable to get a cube

$(document).keydown(function(event) {

  if(event.keyCode == 39) // press right arrow key 
  { 
    focusBox = "#cube" + currentBoxNum; //creates a variable to get a cube

    var translateX = translateXOld - $(focusBox).offset().left - 100;

    var translateY = translateYOld - $(focusBox).offset().top - 100;

    var translate = "translate(" + translateX + "px," + translateY + "px)"; // generated string for css value for property

    console.log(translate);

    // apply trasformations using css3's vendor prefixes
    $(".container").css('-webkit-transform', translate);
    $(".container").css('transform', translate);
    $(".container").css('-moz-transform', translate);
    $(".container").css('-o-transform', translate);

    translateXOld = $(focusBox).offset().left;
    translateYOld = $(focusBox).offset().top;

    currentBoxNum += 1; //allows the selection of the next box on right arrow key press
  }
});