JSFiddle - React, Tailwind, and code Playground

by phloe

HTML

<button>toggle</button>

<div class="container">
  <ul class="boxes">
    <li>
      <b></b><span>Technology</span>
      <ul>
        <li><b></b><span>Technology</span></li>
        <li><b></b><span>Technology</span></li>
        <li>
          <b></b><span>Technology</span>
          <ul>
            <li><b></b><span>Technology</span></li>
            <li><b></b><span>Technology</span></li>
            <li><b></b><span>Technology</span></li>
            <li><b></b><span>Technology</span></li>
          </ul>
        </li>
        <li><b></b><span>Technology</span></li>
        <li><b></b><span>Technology</span></li>
        <li><b></b><span>Technology</span></li>
        <li><b></b><span>Technology</span></li>
      </ul>
    </li>
    <li>
      <b></b><span>Technology</span>
      <ul>
        <li><b></b><span>Technology</span></li>
        <li><b></b><span>Technology</span></li>
        <li><b></b><span>Technology</span></li>

      </ul>
    </li>
    <li>
      <b></b><span>Technology</span>
      <ul>
        <li><b></b><span>Technology</span></li>
        <li><b></b><span>Technology</span></li>
        <li><b></b><span>Technology</span></li>
      </ul>
    </li>
  </ul>
</div>

CSS

* {
  padding: 0;
  margin: 0;
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  perspective: 5000px;
  height: 100%;
  transition: all 3s;
}

body.threedee {
  perspective: 1000px;
}

.container {
  position: aboslute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  _margin: auto 0;
}

.boxes {
  transform-style: preserve-3d;
  transform-origin: 50% 50% -100px;
  transform: none;
  font-size: 0;
  transition: all 3s;
  width: 100%;
  vertical-align: top;
}

.threedee .boxes {
  transform: rotateX(-35.264deg) rotateY(45deg) translateZ(100px);
  _animation: rotate 10s -8.5s linear infinite forwards;
}

.boxes *,
.boxes *:before,
.boxes *:after {
  transform-origin: inherit;
  transform-style: inherit;
  transition: all 3s;
}

.boxes ul {
  display: block;
}

.boxes span {
  color: #000;
  transform-style: flat;
  line-height: 20px;
  display: inline-block;
  position: relative;
  z-index: 1000;
  margin-top: 10px;
	transform-origin: calc(100% - 80px) 0 0;
}

.threedee .boxes span {
  text-indent: 100%;
  margin-top: -20px;
  margin-left: 10px;
	transform: rotateY(-45deg) rotateX(35.264deg);
}

@keyframes rotate {
  from {
    transform: rotateX(-35.264deg) rotateY(0deg);
  }
  to {
    transform: rotateX(-35.264deg) rotateY(360deg);
  }
}

@keyframes box {
  0% {
    background-color: hsl(0, 70%, 60%);
  }
  25% {
    background-color: hsl(90, 70%, 60%);
  }
  50% {
    background-color: hsl(180, 70%, 60%);
  }
  75% {
    background-color: hsl(270, 70%, 60%);
  }
  100% {
    background-color: hsl(360, 70%, 60%);
  }
}

.boxes:after,
.boxes ul:after {
  content: "";
  display: table;
  clear: both;
}

.boxes li {
  float: left;
  font-size: 1rem;
  display: block;
  position: relative;
  opacity: 1;
  vertical-align: middle;
  margin: 25px;
  padding-left: 40px;
}

.threedee .boxes li {
  max-width: 50%;
  min-width: 100px;
  padding-left: 0;
}

.boxes b {
  cursor:...

JavaScript

function $$(selector, element) {
  return [].slice.apply((element || document).querySelectorAll(selector));
}

var boxes = $$(".boxes > li");

colorBoxes(boxes);

function colorBoxes(boxes, spread, offset) {
  offset = offset || 0;
  spread = spread || 360;
  var length = boxes.length;
  var boxspread = spread / length;
  boxes.forEach(function (box, index) {

    var hue = offset + index * boxspread - (spread / 2);
    hue = (hue + 360) % 360;
    box.style.color = "hsl(" + hue + ", 70%, 60%)";
    colorBoxes($$("li", box), boxspread / 2, hue);
  });
}

var threedee = false;
var button = document.querySelector("button");
button.onclick = function () {
  threedee = !threedee;
  document.body.className = (threedee) ? "threedee" : "";
};