JSFiddle - React, Tailwind, and code Playground

by mrjordy

HTML

<div class= "page slideName1 posL4">1</div>
<div class= "page slideName2 posL3">2</div>
<div class= "page slideName3 posL2">3</div>
<div class= "page slideName4 posL1">4</div>
<div class= "page slideName5 posM">5</div>
<div class= "page slideName6 posR1">6</div>
<div class= "page slideName7 posR2">7</div>
<div class= "page slideName8 posR3">8</div>
<div class= "page slideName9 posR4">9</div>

CSS

.page {
  width: 170px;
  height: 170px;
  display: inline-block;
  border: 1px solid red;
  background: white;
  color: red;
  font-size: 40px;
  text-align: center;
  line-height: 170px;
  position: absolute;
  margin-top: 100px;
  transition: .4s;
}
.posL4 {
 -ms-transform: perspective(500px) rotateX(0deg) rotateY(10deg) rotateZ(0deg) scale3d(.6, .6, .6);
-o-transform: perspective(500px) rotateX(0deg) rotateY(10deg) rotateZ(0deg) scale3d(.6, .6, .6);
-moz-transform: perspective(500px) rotateX(0deg) rotateY(10deg) rotateZ(0deg) scale3d(.6, .6, .6);
-webkit-transform: perspective(500px) rotateX(0deg) rotateY(10deg) rotateZ(0deg) scale3d(.6, .6, .6);
transform: perspective(500px) rotateX(0deg) rotateY(10deg) rotateZ(0deg) scale3d(.6, .6, .6);
z-index: 25;
margin-left: calc(50% - 230px);
}
.posL4:hover {
margin-left: calc(50% - 275px);
}
.posL3 {
-ms-transform: perspective(500px) rotateX(0deg) rotateY(30deg) rotateZ(0deg) scale3d(.6, .6, .6);
-o-transform: perspective(500px) rotateX(0deg) rotateY(30deg) rotateZ(0deg) scale3d(.6, .6, .6);
-moz-transform: perspective(500px) rotateX(0deg) rotateY(30deg) rotateZ(0deg) scale3d(.6, .6, .6);
-webkit-transform: perspective(500px) rotateX(0deg) rotateY(30deg) rotateZ(0deg) scale3d(.6, .6, .6);
transform: perspective(500px) rotateX(0deg) rotateY(30deg) rotateZ(0deg) scale3d(.6, .6, .6);
z-index: 26;
margin-left: calc(50% - 180px);
}
.posL3:hover {
margin-left: calc(50% - 220px);
}
.posL3.hoveredPosL1 {
margin-left: calc(50% - 190px);
}
.posL3.hoveredPosL2 {
margin-left: calc(50% - 205px);
}
.posL2 {
-ms-transform: perspective(500px) rotateX(0deg) rotateY(50deg) rotateZ(0deg) scale3d(.6, .6, .6);
-o-transform: perspective(500px) rotateX(0deg) rotateY(50deg) rotateZ(0deg) scale3d(.6, .6, .6);
-moz-transform: perspective(500px) rotateX(0deg) rotateY(50deg) rotateZ(0deg) scale3d(.6, .6, .6);
-webkit-transform: perspective(500px) rotateX(0deg) rotateY(50deg) rotateZ(0deg) scale3d(.6, .6, .6);
transform: perspective(500px)...

JavaScript

$('.posL1').hover(
       function(){ $('.posL2, .posL3').addClass('hoveredPosL1') },
       function(){ $('.posL2, .posL3').removeClass('hoveredPosL1') }
)
$('.posR1').hover(
       function(){ $('.posR2, .posR3').addClass('hoveredPosR1') },
       function(){ $('.posR2, .posR3').removeClass('hoveredPosR1') }
)

$('.posL2').hover(
       function(){ $('.posL3').addClass('hoveredPosL2') },
       function(){ $('.posL3').removeClass('hoveredPosL2') }
)
$('.posR2').hover(
       function(){ $('.posR3').addClass('hoveredPosR2') },
       function(){ $('.posR3').removeClass('hoveredPosR2') }
)