3D текст с hover-эффектом на CSS

3D текст на чистом CSS. Эффект 3D  текста достигается благодаря использованию CSS свойства text-shadow. Для смены времени hover-эффекта необходимо изменить значения свойства transition.

HTML

<h1>Hover over me.<br>I'll surprise you.</h1>

CSS

body {
 background-color:#2d3e43;
 overflow:hidden;
}

h1 {
 margin:100px auto;
 text-align:center;
 font-size:100px;
 color:white;
 position:relative;
 left:0;
 text-shadow:
 1px 1px 0px #c4dbe2,
 2px 2px 0px #b4d1d9,
 3px 3px 0px #a6c6cf,
 4px 4px 0px #94b8c3,
 5px 5px 0px #87aeb9,
 6px 6px 0px #7aa3af,
 7px 7px 0px #6d97a3,
 8px 8px 0px #618b98,
 9px 9px 0px #56818e,
 10px 10px 0px #4c7683,
 15px 15px 25px rgba(0,0,0,.9);
 transition: .5s ease-in-out;
}

h1:hover {
 left:20px;
 text-shadow:
 -1px 1px 0px #c4dbe2,
 -2px 2px 0px #b4d1d9,
 -3px 3px 0px #a6c6cf,
 -4px 4px 0px #94b8c3,
 -5px 5px 0px #87aeb9,
 -6px 6px 0px #7aa3af,
 -7px 7px 0px #6d97a3,
 -8px 8px 0px #618b98,
 -9px 9px 0px #56818e,
 -10px 10px 0px #4c7683,
 -15px 15px 25px rgba(0,0,0,.9);
}