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>
  <button id=b>Click</button>

  <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 {
  perspective: 900px;
  margin: 100px;
  width: 150%;
  height: 75%;
}
#diamond {
  position: relative;
  width: 300px;
  height: 300px;
  transform-origin: 50% 50% -150px;
  transform-style: preserve-3d;
  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);
  transform-origin: 50% 50% -150px;
  backface-visibility: hidden;
}
#side2 {
  transform: rotateY(90deg);
}
#side3 {
  transform: rotateY(-90deg);
}
#side4 {
  transform: rotateX(90deg);
}
#side5 {
  transform: rotateX(-90deg);
}
#side6 {
  transform: rotateY(180deg);
}

JavaScript

$('#b')[0].onclick = function(e){
  	
    $('#diamond').css({
      'transform':'rotateX(30deg)'
    });
    console.log($('#diamond')[0].style.transform);
  };