JSFiddle - React, Tailwind, and code Playground

by aljon254

JavaScript

<style>
	.mainBoxAnimate{
		position:relative;
		width:110px;
		height:100px;
		margin-left:200px;
		background:#FFC9C9;
	}
	.leftGate{
		background:#333;
		border-left:4px solid blue;
		width:55px;
		height:100px;
		
		position:absolute;
		right:0px;
	}
	
	.rightGate{
		background:#333;
		border-right:4px solid blue;
		width:55px;
		height:100px;		
		position:absolute;
		left:0px;
	}	
	</style>	
	
	
	<div class="mainBoxAnimate">
		<div class="leftGate">testy
		</div>
		<div class="rightGate">test
		</div>
	</div>
	
	

	<script>
	$(function(){	
		$('.mainBoxAnimate').mouseenter(function(){
			$('.leftGate').stop().transition({
			  x: 55 ,
			  perspective: '1500px',
			  rotateY: '180deg'		
			},1000,'ease');
			
			$('.rightGate').stop().transition({
			x: -55,
			  perspective: '1500px',
			  rotateY: '-180deg'		  
			},1000,'ease');
		});
		
		$('.mainBoxAnimate').mouseleave(function(){
			$('.leftGate').stop().transition({
			  x: 0 ,
			  perspective: '1500px',
			  rotateY: '0deg'		
			},500,'ease');
			
			$('.rightGate').stop().transition({
			x: 0,
			  perspective: '1500px',
			  rotateY: '0deg'		  
			},500,'ease');
		});			
	})
	</script>