<!-- 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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.