JSFiddle - React, Tailwind, and code Playground

by jasonwilczak

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="src/style.css">
  </head>
  <body>
    <div style="display: flex;flex-direction:row; margin-bottom: 10px;">
      <button id="leftButton">Counter Clockwise</button>
      <button id="rightButton">Clockwise</button>    
    </div>
    <div class="container">
      <div id="box1" class="container-item">Item 1</div>
      <div id="box2" class="container-item">Item 2</div>
      <div id="box3" class="container-item">Item 3</div>
      <div id="box4" class="container-item">Item 4</div>
      <div id="box5" class="container-item">Item 5</div>
      <div id="box6" class="container-item">Item 6</div>
    </div>


   
  </body>
</html>

CSS

body {
  padding: 0 24px;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.container {
  position: relative;
  height: 400px;
  width: 400px;
}
.container-item {
  position: absolute;
  height: 50px;
  width: 50px;
  border: solid black;
  transition: all 2s;
}

/*
.box1 {
  top: 25px;
  left: 25px;
  transform: scale(75%);
}
.box2 {
  top: 0;
  left: 100px;
  transform: scale(50%);
}
.box3 {
  top: 25px;
  left: 175px;
  transform: scale(75%);
}

.box4 {
  top: 100px;
  left: 0;
}
.box5 {
  top: 125px;
  left: 100px;
  transform: scale(125%);
}
.box6 {
  top: 100px;
  left: 200px;
}
*/

/*
.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: space-between;
}
.container-item {
  border: solid black;
  height: 100px;
  width: 100px;
  text-align: center;
  flex-basis: 30%;
}
.box1 {
  color: red;
  height: 60px;
  width: 60px;
}
.box2 {
  color: green;
  height: 25px;
  width: 25px;
}
.box3 {
  color: blue;
  height: 60px;
  width: 60px;
}
.box4 {
  color: orange;
  height: 75px;
  width: 75px;
}
.box5 {
  color: black;
}
.box6 {
  color: purple;
  height: 75px;
  width: 75px;
}


@keyframes GFG {
  0% {
    transform: rotate(0deg) 
      translateY(100px) rotate(0deg);
  }

  100% {
    transform: rotate(360deg) 
      translateY(100px) rotate(-360deg);
  }
}
*/

  /*transform: translateX(-60px);*/
  /*animation: GFG 5s infinite linear;*/

JavaScript

var positionStyles = {
	'back-left': {'top':'25px','left':'25px','transform': 'scale(75%)'},
	'back': {'top':'0','left':'100px','transform': 'scale(50%)'},
	'back-right': {'top':'25px','left':'175px','transform': 'scale(75%)'},
	'front-right': {'top':'100px','left':'200px','transform': 'scale(100%)'},
	'front': {'top':'125px','left':'100px','transform': 'scale(125%)'},
	'front-left': {'top':'100px','left':'0','transform': 'scale(100%)'},
}

var boxPositions = {
	'box1':'back-left',
	'box2':'back',
	'box3':'back-right',
	'box4':'front-right',
	'box5':'front',
	'box6':'front-left',
}
var orderArray = [
'back-left','back','back-right','front-right','front','front-left'
];

updateDisplay();

function updateDisplay(rotation) {
  switch(rotation) {
    case 'clockwise':     
    	console.log('rotating clockwise');
      arrayRotate(orderArray);
      break;
    case 'counter':
    	console.log('rotating counter');
      arrayRotate(orderArray,true);
      break;
    default:
    	console.log('no rotation');
      orderArray;
      break;
  }
	Object.keys(boxPositions).forEach(function(key,index){
  	console.log("Modifying box position: "+ key);
    console.log("Currently: "+ boxPositions[key])
  	boxPositions[key] = orderArray[index];
    console.log("New: "+ boxPositions[key]);
    var currentBox = document.getElementById(key);
    currentBox.style.top = positionStyles[boxPositions[key]].top;
    currentBox.style.left = positionStyles[boxPositions[key]].left;
    currentBox.style.transform = positionStyles[boxPositions[key]].transform;
    console.log(key + " element repositioned.");
  })
  
}

function arrayRotate(arr, reverse) {
  if (reverse) arr.unshift(arr.pop());
  else arr.push(arr.shift());
  return arr;
}

document.getElementById('leftButton').onclick = function () {
	updateDisplay('counter');
  /*
  document.getElementById('box1').style.top = '25px';
  document.getElementById('box1').style.left = '25px';
  document.getElementById('box1').style.transform =...