JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="css/main.css">
  <title>Вращение ромба</title>
</head>
<body>
  <div id="wrapper">
    <div id="diamond">
      <div class="side" id="side1"></div>
      <div class="side" id="side2"></div>
      <div class="side" id="side3"></div>
      <div class="side" id="side4"></div>
      <div class="side" id="side5"></div>
      <div class="side" id="side6"></div>
    </div>
  </div>

  <script src="js/jquery.min.js"></script>
  <script src="js/app.js"></script>
</body>
</html>

CSS

body {
  background-color: #C9C9C9;
  font-family: Verdana, sans-serif;
}
#wrapper {
  -moz-perspective: 900px;
  margin: 100px;
  width: 150%;
  height: 75%;
}
#diamond {
  position: relative;
  width: 300px;
  height: 300px;
  -moz-transform-origin: 50% 50% -150px;
  -moz-transform-style: preserve-3d;
  -moz-transform: rotate3d(1, 1, 30, 135deg);
}
.side {
  width: 300px;
  height: 300px;
  background: -moz-radial-gradient(rgba(255, 0, 0, .9), rgba(50, 0, 0, .9));
  position: absolute;
  border: 3px solid #FFF;
  border-radius: 10px;
  text-align: center;
  font-size: 50px;
  box-shadow: 0 0 2px rgba(0, 0, 0, .5);
  -moz-transform-origin: 50% 50% -150px;
  -moz-backface-visibility: hidden;
}
#side2 {
  -moz-transform: rotateY(90deg);
}
#side3 {
  -moz-transform: rotateY(-90deg);
}
#side4 {
  -moz-transform: rotateX(90deg);
}
#side5 {
  -moz-transform: rotateX(-90deg);
}
#side6 {
  -moz-transform: rotateY(180deg);
}

JavaScript

$(function() {
  $(document).mousemove(function(e){
    $('#diamond').css({
      '-moz-transform':'rotateX('+e.pageY+'deg) rotateY('+e.pageX+'deg)'
    });
  });
});