Lucian Marin
Animated 3D logo in CSS
I wanted to create a special logo for Subreply, a new product of mine. I ended up with an orbital solution that was actually a hack on the display refresh rate. Basically, the refresh rate of a computer monitor is 60 Hz, but the circle rotated at a higher rate — creating the illusion that there was more than one circle rotating.
Then I found that you can create very smooth 3D animated logos with CSS if you carefully tweak the transform and animation properties. In the case below, I rotated each circle by 180deg on all XYZ axes, delayed the animation of each circle equally, and positioned them absolutely on top of one another. The result is pretty spectacular, if you ask a designer who loves static logos.
CSS code
@keyframes outer {
to { transform: rotateX(180deg) rotateY(180deg) rotateZ(180deg); }
}
.orbital .one { animation: outer 8s 0s infinite; }
.orbital .two { animation: outer 8s 2s infinite; }
.orbital .three { animation: outer 8s 4s infinite; }
.orbital .four { animation: outer 8s 6s infinite; }
HTML code
<div class="orbital">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
</div>