3D Текст с отражением
на чистом CSS без js
HTML
<div class="container">
<span class="render">Dbmast.ru</span>
<span class="render shadow">___________</span>
<span class="render reflect">Dbmast.ru</span>
</div>
CSS
@import url(https://fonts.googleapis.com/css?family=Bree+Serif);
html, body {
height: 100%;
}
.container {
margin:0 auto;
align-self: center;
width: 600px;
-moz-perspective: 980px;
-webkit-perspective: 980px;
perspective: 980px;
position: relative;
}
.render {
display: inline-block;
z-index: 0;
position: relative;
line-height: 0.55em;
height: 0.7em;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
-moz-transform: rotateY(30deg);
-webkit-transform: rotateY(30deg);
transform: rotateY(30deg);
font-family: 'Bree Serif', serif;
font-size: 12em;
color: #f5f5f5;
text-shadow: white 0.006em 0.006em 1px, rgba(0, 0, 0, 0.15) -3px 7px 10px, #d0d0d0 -1px 1px 1px, #d0d0d0 -2px 1px 1px, #d0d0d0 -3px 1px 1px, #d0d0d0 -4px 1px 1px, #d0d0d0 -5px 1px 1px, #d0d0d0 -6px 1px 1px, #d0d0d0 -7px 1px 1px, #d0d0d0 -8px 1px 1px, #d0d0d0 -9px 1px 1px, #d0d0d0 -10px 1px 1px, #d0d0d0 -11px 1px 1px, #d0d0d0 -12px 1px 1px, rgba(255, 255, 255, 0.6) -5px 2px 100px;
}
.render.reflect {
z-index: 0;
opacity: 0.2;
-moz-transform: rotateX(180deg) rotateY(-30deg);
-webkit-transform: rotateX(180deg) rotateY(-30deg);
transform: rotateX(180deg) rotateY(-30deg);
}
.render.shadow {
opacity: 0.6;
z-index: 2;
color: transparent;
letter-spacing: -0.02em;
position: absolute;
top: 0.44em;
left: 0.1em;
-moz-transform-origin: 0 0 50%;
-ms-transform-origin: 0 0 50%;
-webkit-transform-origin: 0 0 50%;
transform-origin: 0 0 50%;
-moz-transform: rotateX(-100deg) rotateY(-5deg) rotateZ(30deg);
-webkit-transform: rotateX(-100deg) rotateY(-5deg) rotateZ(30deg);
transform: rotateX(-100deg) rotateY(-5deg) rotateZ(30deg);
text-shadow: rgba(0, 0, 0, 0.8) 0 0 30px, rgba(0, 0, 0, 0.8) 0 0 80px, black 0 0 150px, black 0 0 150px, black 0 0 250px, black 0 0 250px, white -0.15em 0.4em 250px;
}