Building a Circular Navigation with CSS Transforms
A tutorial on how to create a circular navigation using CSS transforms. View demo Download source In this tutorial I’m going to show you how to create circular navigations using CSS transforms. I’m going to take you through the steps for creating these styles one by one, and explain the math (yikes!) and simple logic behind them so you get a clear understanding of the technique. Like I mentioned, there’s going to be some basic math involved, along with CSS transforms to create these styles. I also want to mention that credit for the original technique goes to Ana Tudor. So, without further ado, let’s get started! The Markup We’re going to be building a navigation, so we’ll start with a regular navigation structure. The icons we’re using in this demo are from Font Awesome. The Math Behind the CSS Transforms The best way to explain the math is to use a visual explanation instead of a written one. First let’s go over what a “central angle” is. 180deg / 6 = 30deg 360deg / 6 = 60deg And so on.
Related: Banque d'effet JS
• HTML + CSS