Lucian Marin
Animated 3D logo in CSS
I wanted to create a special logo for Sublevel, a new product from me. I ended up with an orbital solution that was actually a hack on display refresh rate. Basically the refresh rate of a computer monitor is 60 Hz, but the circle rotated at an higher rate. It created the ilusion that there were more than one circle rotating.
Then I found that you can create very smooth 3D animated logos with CSS, if you carefully tweak transform and animation properties. In the case below I used to rotate a circle at 180deg on all XYZ axis, equally delay the animation of each circle and position them absolutely on top of each one. The result is pretty spectaluar if you ask a designer that 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>