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
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);
}
}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 ]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]
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. 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.
Comment Preview