JSFiddle - React, Tailwind, and code Playground

HTML

<div class="output"></div>
<div class="box"><div class="direction"></div></div>

CSS

.output {
    position: absolute;
}

.box {
    width: 300px;
    height: 300px;
    background-color: blue;
    position: absolute;
    left: calc(50% - 150px);
    top: calc(50% - 150px);
    -webkit-transform-style: preserve-3d;
    transition: all 0.01s ease-out;
    -webkit-transform-origin: 90px 90px -90px;
}

.direction {
    width: 1px;
    height: 50px;
    background-color: #000000;
    position: absolute;
    left: 50%;
}

JavaScript

var box = document.getElementsByClassName('box')[0];
var output = document.getElementsByClassName('output')[0];

var socket = new WebSocket('ws://192.168.100.125:8080');
socket.onmessage = function (event) {
  //console.log(event.data);
   var coords = JSON.parse(event.data);
    box.setAttribute('style', 'transform: rotate(' + (coords.x * 90) + 'deg)');
    output.innerText = event.data;
}