<!-- Flip animation on hover for https://templateflip.com site title -->
<link href="https://fonts.googleapis.com/css?family=Muli:700" rel="stylesheet">

<h1><a href="https://templateflip.com" class="flip-animate" target="_blank">Template<span data-hover="Flip">Flip</span></a></h1>
// Inspired from https://tympanus.net/Development/CreativeLinkEffects/

html, 
body {
    height: 100%;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;    
  //background: linear-gradient(-45deg,#00b1b3,#1d5086);
  background: #fff;
}

h1 {
  font-family: 'Muli', sans-serif;
  font-size: 4em;
  font-weight: 700;
}

a {
  color: #333;
  text-decoration: none;
  transition: color 0.3s;
  outline: none;
}

a:hover,
a:focus {
  color: #222;
}

a.flip-animate {
  perspective: 1000px;
  
  span {
    position: relative;
    display: inline-block;
    padding: 0;    
    transition: transform 0.3s;
    transform-origin: 50% 0;
    transform-style: preserve-3d;
  }
  
  span:before {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 100%;
    content: attr(data-hover);
    transition: color 0.3s;
    transform: rotateX(-90deg);
    transform-origin: 50% 0;
    text-align: center;
  }
  
  &:hover span,
  &:focus span {
    transform: rotateX(90deg) translateY(-22px);
  }
  
  &:hover span:before,
  &:focus span:before {
    color: rgb(210, 73, 54);
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.