Next I had to apply this to all the letters respecting that the middle letter is not transformed, the ones to the right are tilted in the opposite direction and the height of the letters changes.

See the Pen netflix logo | (figure-1) by Gregor Adams ( on CodePen. 0.5) but these values turned out to work the best for my needs. There are different way of doing this, like using a different perspective (e.g. Transform : scaleX (80 ) rotateY (89.5deg ) The important part is setting a perspective on the wrapper and defining its perspective-origin. Then I rotated the letters on the y-axis and scaled them on the x-axis to retain its original width. I made a wrapper with the class logo and wrapped each letter in a span. I started with some basic markup for the word “Netflix” People have been asking me how I did that… I do a lot of 3d experiments, so this wasn’t that much of a difficulty to me. But there is something else about the logo that I needed to take care of: the letters are tilted to the center of the logo. So these were the animation steps I needed to replicate.

I tend to do that a lot because it allows me to stop at certain frames to figure out what is actually going on. I recorded the logo and looped it in Quicktime so I could examine it in detail. Luckily I always have a few tricks up my sleeve when it comes to CSS.īut let’s talk about the actual animation. My first implementation was a little dirty since I was trying a few things.įor example: I wanted to do this in pure CSS and I also wanted to be able to run the animation again when I click a button, so I had to use some magic.

So after watching a few episodes I went over to CodePen and started to work on the logo. I immediately started thinking about implementing this in CSS. Each episode or movie starts with the Netflix logo animation. I started watching a lot of series that I usually had to view elsewhere. Gregor is kind of the rising star when it comes to CSS, so needless to say it is a great honor to have him here.Ī few months ago I tested Netflix, immediately got hooked and got myself an account. The following is a guest post by Gregor Adams about how he managed to re-create the Netflix logo in CSS.

Dark netflix font