CSS3 Development by Software RVG. Transform, Animation ,floating logo, background degree blue .
VIEW IN DEBUG MODE ON CODEPEN . follow this link.
http://codepen.io/SoftwareRVG/pen/MyVZox/
<title>CSS3 ANIMATION FLOATING LOGO by SOFTWARE RVG</title> <script src="//assets.codepen.io/assets/editor/live/console_runner-ba402f0a8d1d2ce5a72889b81a71a979.js"></script><script src="//assets.codepen.io/assets/editor/live/events_runner-902c66a0175801ad4cdf661b3208a97b.js"></script><script src="//assets.codepen.io/assets/editor/live/css_live_reload_init-bad5f8d322020126e7b4287d497c7efe.js"></script> <script src="css3_Softw@reRVG_files/modernizr.js" type="text/javascript"></script> <script src="//codepen.io/assets/libs/prefixfree.min.js"></script> <style class="cp-pen-styles">@charset "UTF-8"; @import url("//fonts.googleapis.com/css?family=Roboto:500&text=Softw@re "); @import url("//fonts.googleapis.com/css?family=Roboto:500&text=RVG"); @import url("//fonts.googleapis.com/css?family=Roboto:100&text=CSS3 "); body { min-height: 450px; height: 100vh; margin: 0; background: radial-gradient(circle, #0077ea, #1f4f96, #1b2949, #000000); }
.stage { height: 300px; width: 500px; margin: auto; position: absolute; top: 0; right: 0; bottom: 0; left: 0; perspective: 9999px; transform-style: preserve-3d; }
.layer { width: 100%; height: 100%; position: absolute; transform-style: preserve-3d; opacity: 0; animation: ?_? 5s infinite alternate ease-in-out -7.5s, o_O 0.1s 1; animation-fill-mode: forwards; transform: rotateY(40deg) rotateX(33deg) translateZ(0); }
.layer:after { font: 100px/0.65 'Pacifico', 'Kaushan Script', Futura, 'Roboto', 'Trebuchet MS', Helvetica, sans-serif; content: 'Softw@re\A RVG'; white-space: pre; text-align: center; height: 100%; width: 100%; position: absolute; top: 50px; color: whitesmoke; letter-spacing: -5px; text-shadow: 4px 0 10px rgba(0, 0, 0, 0.13); }
.layer:nth-child(1):after { transform: translateZ(0px); }
.layer:nth-child(2):after { transform: translateZ(-2px); }
.layer:nth-child(3):after { transform: translateZ(-4px); }
.layer:nth-child(4):after { transform: translateZ(-6px); }
.layer:nth-child(5):after { transform: translateZ(-8px); }
.layer:nth-child(6):after { transform: translateZ(-10px); }
.layer:nth-child(7):after { transform: translateZ(-12px); }
.layer:nth-child(8):after { transform: translateZ(-14px); }
.layer:nth-child(9):after { transform: translateZ(-16px); }
.layer:nth-child(10):after { transform: translateZ(-18px); }
.layer:nth-child(11):after { transform: translateZ(-20px); }
.layer:nth-child(12):after { transform: translateZ(-22px); }
.layer:nth-child(13):after { transform: translateZ(-24px); }
.layer:nth-child(14):after { transform: translateZ(-26px); }
.layer:nth-child(15):after { transform: translateZ(-28px); }
.layer:nth-child(16):after { transform: translateZ(-30px); }
.layer:nth-child(17):after { transform: translateZ(-32px); }
.layer:nth-child(18):after { transform: translateZ(-34px); }
.layer:nth-child(19):after { transform: translateZ(-36px); }
.layer:nth-child(20):after { transform: translateZ(-38px); }
.layer:nth-child(n+10):after { -webkit-text-stroke: 3px rgba(0, 0, 0, 0.25); }
.layer:nth-child(n+11):after { -webkit-text-stroke: 15px dodgerblue; text-shadow: 6px 0 6px #00366b, 5px 5px 5px #002951, 0 6px 6px #00366b; }
.layer:nth-child(n+12):after { -webkit-text-stroke: 15px #0077ea; }
.layer:last-child:after { -webkit-text-stroke: 17px rgba(0, 0, 0, 0.1); }
.layer:first-child:after { color: #fff; text-shadow: none; }
@keyframes ?_? { 100% { transform: rotateY(-40deg) rotateX(-43deg); } } @keyframes o_O { 100% { opacity: 1; } } </style>