To do this I needed to add some logic: I use Sass with the SCSS syntax to do this. 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. Although it is free of copyright restrictions, this image may still be subject to other restrictions. It does not meet the threshold of originality needed for copyright protection, and is therefore in the public domain.
I recorded the logo and looped it in Quicktime so I could examine it in detail. This logo image consists only of simple geometric shapes or text. Download this royalty free icon and use it for personal or commercial purpose. Luckily I always have a few tricks up my sleeve when it comes to CSS.īut let’s talk about the actual animation. This icon is available on the Iconscout web as well as accessible from the Iconscout plugin for the Sketch app, Adobe Illustrator, Adobe Photoshop, Adobe XD, Google Docs, Google slide, Microsoft Word, and PowerPoint. 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.
#Netflix logo how to
How to Change the Name of the Netflix Desktop Icon. If that is the case, then we need to make another adjustment.
#Netflix logo movie
Each episode or movie starts with the Netflix logo animation. It’s possible, though, that you were just looking for a basic icon of the Netflix logo, with maybe just the word Netflix underneath it.
#Netflix logo series
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.