<div class="flex-container">
<a data-tilt data-tilt-glare="true" data-tilt-transition="true"  data-tilt-scale="1.1" class="c-logo" href=" " title="Tilt.js demo ">
  <span>Test Tilt.js</span>
</a> 
 
 </div>

  $size: 300px;

@import url('https://fonts.googleapis.com/css?family=Fira+Sans:300,400,500,600,700');

*{
  box-sizing: border-box;
}
 
body{
  font-family: 'Fira Sans';    
  background:#e7e7e7; 
  margin-top:5%;
}
.flex-container , .c-logo {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-content: stretch;
    align-items: center;
    }

 

 
.c-logo {       
  width: $size;
  height: $size;
  background-color: #7e56ff;
  background-image: linear-gradient(150deg, #5a00ff 0%, #ff1ff7 100%, #ff1ff7 100%);
  box-shadow: 0 20px 27px rgba(0, 0, 0, 0.05);
 
  color: white;
  text-decoration: none;
  font-size: 4em;
  font-weight: 300;
  transform-style: preserve-3d;
  transform: perspective(500px); 
   box-shadow: 0 20px 70px -10px rgba(black, .7), 0 50px 100px 0 rgba(black, .2);
  
  > span {
    display: block;
    transform: translateZ(50px) scale(.6);
     text-shadow: -2px -1px 2px rgba(150, 150, 150, 1);
  }

  &:hover {
    &:after{
      transform: translateZ(-100px);
    }
  }
} 
  
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://s3-us-west-2.amazonaws.com/s.cdpn.io/130527/vanilla-tilt.min.js