JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class="menu">
  <div class="item a"><a href="#link">LInk A</a></div>
  <div class="item b"><a href="#link">LInk B</a></div>
    <div class="item c"><a href="#link">LInk C</a></div>
    <div class="item d"><a href="#link">LInk D</a></div>
    <div class="item e"><a href="#link">LInk E</a></div>
    <div class="item f"><a href="#link">LInk F</a></div>
  </div>
  <div class="next"></div>
<div class="prev"></div>
</div>
<p>
Hover over the menu to move it....
</p>

CSS

body {background:black;padding: 70px 0;}
p {color:white;}
a {text-decoration:none;}
.container { width:800px; height:100px; background-color:grey; position: relative; perspective: 1800px; overflow: show;}
.menu { height: 100%; width: 50%;  position: absolute; margin-left:200px; transform-style: preserve-3d; transition: transform 1s;}
.item { position:absolute; display: block; background: #000;width: 140px;height: 50px;line-height: 50px; font-size: 2em;text-align: center;color: #FFF;opacity: 0.95;
  border-radius: 20px; border: 2px solid white; }
.a { transform: rotateY(0deg) translateZ(121px);background: rgba(255,0,0,.7);}
.b {transform: rotateY(60deg) translateZ(121px);background: rgba(0,0,255,.7);}
.c {transform: rotateY(120deg) translateZ(121px);background: rgba(0,255,0,.7);}
.d {transform: rotateY(180deg) translateZ(121px);background: rgba(255,0,255,.7);}
.e {transform: rotateY(240deg) translateZ(121px);background: rgba(255,255,0,.7);} 
.f {transform: rotateY(300deg) translateZ(121px);background: rgba(255,255,255,.7);}
.next {width:50%;height:100%;position:absolute; right:0; /*background-color:blue;*/}
.prev {width:50%;height:100%;position:absolute; left:0; /*background-color:red;*/}

JavaScript

// moveit with hover on next and prev divs
// +60 deg on next and -60 deg on prev yo

jQuery(document).ready(function($) {
var carousel = $(".menu"),
currdeg = 0;
//$( ".next" ).hover({ d: "n" }, rotate);
//$(".prev").hover({ d: "p" }, rotate);
$(".next").on("mouseenter", { d: "n" }, rotate);
$(".prev").on("mouseenter", { d: "p" }, rotate);
function rotate (e){
if(e.data.d=="n"){
    currdeg = currdeg - 60;
  }
  if(e.data.d=="p"){
    currdeg = currdeg + 60;
  }
  carousel.css({
    "-webkit-transform": "rotateY("+currdeg+"deg)",
    "-moz-transform": "rotateY("+currdeg+"deg)",
    "-o-transform": "rotateY("+currdeg+"deg)",
    "transform": "rotateY("+currdeg+"deg)"
  });
};



});