<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"UTF-8"
/>
<
meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1.0"
/>
<
title
>Double Layered Text</
title
>
<
style
>
body {
background: black;
}
.geeks {
text-align: center;
margin: 200px auto 0;
font-family: Arial, Helvetica, sans-serif;
}
.geeks span {
font-size: 80px;
font-weight: 700;
color: green;
position: relative;
text-shadow: -1px 0 0 rgba(0, 0, 0, .2);
}
.geeks span::before {
content: attr(data-title);
position: absolute;
top: 0;
left: 0;
transform-origin: left;
color: #fff;
transition: .5s cubic-bezier(
0.175, 0.885, 0.32, 1.275);
transform: rotateY(25deg);
}
.geeks span:hover::before {
transform: perspective(1000px) rotate(-67deg);
}
</
style
>
</
head
>
<
body
>
<
div
class
=
"geeks"
>
<
span
data-title
=
"G"
>G</
span
>
<
span
data-title
=
"E"
>E</
span
>
<
span
data-title
=
"E"
>E</
span
>
<
span
data-title
=
"K"
>K</
span
>
<
span
data-title
=
"S"
>S</
span
>
<
span
data-title
=
"F"
>F</
span
>
<
span
data-title
=
"O"
>O</
span
>
<
span
data-title
=
"R"
>R</
span
>
<
span
data-title
=
"G"
>G</
span
>
<
span
data-title
=
"E"
>E</
span
>
<
span
data-title
=
"E"
>E</
span
>
<
span
data-title
=
"K"
>K</
span
>
<
span
data-title
=
"S"
>S</
span
>
</
div
>
</
body
>
</
html
>