JSFiddle - React, Tailwind, and code Playground

by 0669753966sv

HTML

<div id="wrapper">
		
			
			<div id="cub">

				<div class="side" id="side1"><img src="../image/1mini.jpg" alt="" class="img_section_our_blog"></div>
				<div class="side" id="side2"><img src="../image/2mini.jpg" alt="" class="img_section_our_blog"></div>
				<div class="side" id="side3"><img src="../image/3mini.jpg" alt="" class="img_section_our_blog"></div>
				<div class="side" id="side4"><img src="../image/4mini.jpg" alt="" class="img_section_our_blog"></div>
				<div class="side" id="side5"><img src="../image/5mini.jpg" alt="" class="img_section_our_blog"></div>
				<div class="side" id="side6"><img src="../image/6mini.jpg" alt="" class="img_section_our_blog"></div>
				<div class="side" id="side7"><img src="../image/7mini.jpg" alt="" class="img_section_our_blog"></div>			
				<div class="side" id="side8"><img src="../image/8mini.jpg" alt="" class="img_section_our_blog"></div>			
										
			</div>
		</div>

CSS

#wrapper{ 
position: relative;
  margin: 25px auto;
width: 460px;
border: 0; 
          perspective: 460px;}
      
  #cub{
  width: 460px;
  height: 250px;
margin: 0 auto;
 position: relative;
         transform-origin: 50% 50% -555.2691193px;
         transform-style: preserve-3d;        
         border: 0;}
.side{
  width: 460px;
  height: 250px;
  background: rgba(0, 0, 0, 0.3);
  border: 10px solid #fff;
  border-radius: 10px;
  font-size: 3em;
  position: absolute;
  line-height: 300px;
  text-align: center;  
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);  
          transform-origin: 50% 50% -555.2691193px;}

          img{
            display:block;
            width: 100%;
            
          }
          .side1{
            transform:rotate3d(0, 1, 0, 45deg);
          }


#side1{
 transform:rotateY(0deg);}
#side2{
  transform:rotateY(45deg);}
#side3{
  transform:rotateY(90deg);}
#side4{
  transform:rotateY(135deg);}
#side5{
  transform:rotateY(180deg);}
#side6{
  transform:rotateY(225deg);}
#side7{
  transform:rotateY(270deg);}
  #side8{
  transform:rotateY(315deg);}

JavaScript

$('#wrapper .side').on('click', function() {
var cub_rotate = $('#cub'); 

  
  if ($(this).is('#side1')){
    cub_rotate.css({'transform': 'rotate3d(0, 1, 0, -45deg)','transition':'all 1s linear'});}
    else if ($(this).is('#side2')){
    cub_rotate.css({'transform': 'rotate3d(0, 0.1,0, -90deg)','transition':'all 1s linear'});}
   else if ($(this).is('#side3')){
    cub_rotate.css({'transform': 'rotate3d(0, 0.1,0, -135deg)','transition':'all 1s linear'});}
    else if ($(this).is('#side4')){
    cub_rotate.css({'transform': 'rotate3d(0, 0.1,0, -180deg)','transition':'all 1s linear'});}
    else if ($(this).is('#side5')){
    cub_rotate.css({'transform': 'rotate3d(0, 0.1,0, -225deg)','transition':'all 1s linear'});}
    else if ($(this).is('#side6')){
    cub_rotate.css({'transform': 'rotate3d(0, 0.1,0, -270deg)','transition':'all 1s linear'});}
    else if ($(this).is('#side7')){
    cub_rotate.css({'transform': 'rotate3d(0, 0.1,0, -315deg)','transition':'all 1s linear'});}
    else if ($(this).is('#side8')){
    cub_rotate.css({'transform': 'rotate3d(0, 0.1,0, -360deg)','transition':'all 1s linear'});
}
   
   
});