JSFiddle - React, Tailwind, and code Playground

HTML

<section class="container">
  <div id="mainmenu" class="rmenu">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
  </div>  
</section>

CSS

.rmenu {
  position: absolute;
  transform-style: preserve-3d;
  margin-top: 100px;
}
.rmenu div {
  border: 1px solid gray;
  width: 100px;
  height: 20px;
  margin: 0;
  position: absolute;
}
.container {
  position: relative;
  perspective: 1000px;
  display: flex;
  align-items: center;
  justify-content: center;
}

JavaScript

function RotaMenu ( e ) {
	this.element = e;
	this.rotation = 0;
	this.panelCount = this.element.children().length;
	this.panelSize = $(this.element).children().first().outerHeight();
	this.theta = 360 / this.panelCount;
	this.radius = Math.round( ( this.panelSize / 2) / Math.tan( Math.PI / this.panelCount ) )
	console.log("Created new menu: panelCount=" + this.panelCount + ", panelSize=" + this.panelSize + ", theta=" + this.theta + ", radius=" + this.radius);
}

RotaMenu.prototype.update = function() {
	for ( i = 0; i < this.panelCount; i++ ) {
		panel = $(this.element).children()[i];
		angle = Math.round(this.theta * i);
		$(panel).css('transform','rotateX(' + angle + 'deg) translateZ(' + this.radius + 'px)');
	}
};


$(function() {
	var mainmenu = new RotaMenu($('#mainmenu'));
	mainmenu.update();
});