3d perspective

animation 3d

by Glynne Turner

HTML

<div class="perspective">
    <div class="box">box 1</div> 
   <span class="shadow"></span>
 
</div>
<div class="perspective">
    <div class="box">box 2</div> 
   <span class="shadow"></span>
</div>
<div class="perspective">
    <div class="box">box 3</div> 
   <span class="shadow"></span>
</div>
<div class="perspective">
    <div class="box">box 4</div> 
   <span class="shadow"></span>
</div>

CSS

* {margin: 0; padding: 0}

.perspective  { 
    -webkit-transition: all .55s ease;
    margin-top:15px;
    float: left;
    height: 240px !important; 
    width: 240px;
    -webkit-transform: perspective(1000) rotateY(45deg); 
     
    z-index:1;
    
} 

 
  
.hovered {
    -webkit-transform: perspective(1000) rotateY(0deg);
     
    height: 100% !important;
    width:100%;
    margin:0; 
    z-index:2;
    position:absolute; 
} 
 .box   {
    background-color: #444;;
    float: left;min-height:240px;
    height: 100%;
    margin: none;
    width: 100%;  
}
 .shadow{
  background-image: url('https://www.thanet-web-design.com/images/blur.png?1');
  height:30px; 
  width:100%;
  display: inline-block;
  background-size: contain; 
  
  
  
}

JavaScript

$('.perspective').click(function(event){ 
$('.perspective, .shadow').hide();
	$(this).show().toggleClass('hovered');
		 
     setTimeout(function(){$('.perspective, .shadow').show();}, 500);
 
   event.preventDefault(); 
})