demo mozilla CSS 3 floating logo by Software RVG

body {background-image:url('https://lh4.googleusercontent.com/-9pHTGP3E1Ns/V60HjLihnYI/AAAAAAAACc8/IsVjN_mIwqwtWl4xdu4E5xFE5I_RV7OxACL0B/w1092-h521-no/firefox-beta_logo-only_RGB_by_SoftwareRVG_snippets-1.png'); min-height: 450px; height: 100vh; margin:0px; font:arial; color:#ffffff;} a { color:#0000FF; } a:visited { color:#ffffff; } a:hover { color:#ff0000; } a:active { color:#FF0000; } h5{margin-left:250px; margin-top:1px; color:orange;} h6{margin-left:190px; margin-top:5px; } .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: 200px/0.65 metabold; content: 'mozilla \A \A '; 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 #fe642e;} .layer:nth-child(n+11):after { -webkit-text-stroke: 15px dodgerorange; text-shadow: 3px 0 3px #ff4000, 2px 2px 2px #ff4000, 0 3px 3px #ff4000;} .layer:nth-child(n+12):after { -webkit-text-stroke: 15px dodger; text-shadow:3px 0 3px #ff4000,2px 2px 2px #ff4000, 0 3px 3px #ff4000,} .layer:last-child:after { -webkit-text-stroke: 5px #ff4000 ;} .layer:first-child:after { color: #fff; text-shadow: rgba(0, 0, 0, 0.5);} @keyframes ಠ_ಠ { 100% {transform: rotateY(-40deg) rotateX(-43deg);}} @keyframes o_O { 100% { opacity: 1;}} .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);}