Text Me Up Circle

It all started with a dream where I was using css to make Fender Stratocaster volume and tone potentiometer knobs. The very next morning my dream came true and I was on my way to bliss → (Codepen : http://codepen.io/grayghostvisuals/full/volume-knobs/38). You see … css3 Transforms and a little Sass looping is the trick to this devil in disguise. While I was writing the CSS for the example –using Codepen of course– I had a little birdie hit me up with a super awesome trick (Codepen : http://codepen.io/chriscoyier/full/100/4). This rad example was eventually followed up with an amazing article on the killer css3 Transform & Sass loop combo → (css–Tricks : http://css-tricks.com/set-text-on-a-circle). Let’s take a look at the following example and then dive deeper into the belly of the beast.

The Example

Setting text in a circle using CSS3 Transformations with a Sass loop for the heavy lifting

The Loop–de–Loop

view example 1a.
The real gem in this example is the use of a Sass loop that runs through each character wrapped in an <i> element that has a class of .num-#{$i}. The #{$i} portion is just part of our Sass loop equation where #{$i} is replaced with its corresponding number of 1 thru 10. Our loop runs through every element with this class and rotates it by 32°. The loop is essentially saying “For every class with .num-#{i} –(Remembering that #{i} is our number)– multiply #{i} by 32 and concatenate ‘deg’ to the result.”

This formula would gives us the following breakdown of (1*32, 2*32, 3*32, 4*32, 5*32, 6*32, 7*32, 8*32, 9*32, 10*32). The product of the arithmetic provides us with ‘deg’ values of (32°, 64°, 96°, 128°, 160°, 192°, 224°, 256°, 288° 320°). You might be saying “Hey doesn’t a circle add up to 360° ?” Umm…yes you’re right but my example leaves a little space to mimmic the actual object. If manually wrapping each character with a generic element is too much for you then just use LETTERING.JS by Paravel to insert <span> elements instead of manually typing <i> around each character you want to rotate.

Example 1a

@for $i from 1 through 10 {
  .num-#{$i} {
    transform: rotate(($i*32)+deg);
  }
}
this is our loop, the whole loop and nothing but the loop

Transform Origin?

If you’re like me then you’re probably wondering how the characters are not “skewy” lookin’? Well that trick came from Chris with his recommendation on using a property called transform–origin that might be even cooler than that sneaky Sass loop. So what does this do? Well, the transform–origin property lets authors modify the origin for transformations of an element. So lets say we have an element we want to transform then we would set it’s origin like so…

transform-origin: [ left | center | right ] || [ top | center | bottom ]
One single value sets the horizontal position, the vertical position is set to 50% by default centering our vertical co–ordinate. Two values apply first to the horizontal and second to the vertical position.

I like to think of a square box where each corner is a point upon which the object will rotate. So an element with transform–origin: right top would rotate the element from the upper right corner of the square.

  • [center, top]
  • [right, top]
  • [right, center]
  • [right, bottom]
  • [bottom, center]
  • [bottom, left]
  • [left, center]
  • [left, top]
examples of transform–origin and the variations for each parameter accepted. Very much like something we’re already familiar with. Have you guessed it yet?

Pretty much like background–position right? Actually, it’s exactly like background–position. We can even substitute the keyword approach for percentage values. As an example we could have transform-origin: 82% 5% where the first value sends the point 82% across the x–axis and 5% down the y–axis offsetting everything from the top left corner. Feel free to dig deeper with the links below and see where you can take it –or better yet– combine it with transitions for some really interesting effects. May the transforms be with you.

Links!

Dennis Gaebel

Design Technologist passionate for Open Source, SVG, Typography, Web Animation, Interaction Development & Pattern Based Design. http://droidpinkman.io.

Leave a Reply

Your email address will not be published. Required fields are marked *

show formatting examples
<pre class="language-[markup | sass | css | php | javascript | ruby | clike | bash]"><code>
…code example goes here…
</code></pre>

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Comment Preview

  1. John Doe shouted this comment preview:
    2012/07/14