CSS "Turn" Units

i won’t lie, im not great a math - i’ll admit i have to whip out the calculator sometimes when writing transforms and animations. luckily for us (and unknown to me, til’ recently) css has a unit called turn!


a “turn” unit is exactly what it sounds like: 𝐨𝐧𝐞 𝐟𝐮𝐥𝐥 𝐜𝐢𝐫𝐜𝐥𝐞 🔄


when im animating stuff in css and want to add rotation, its 𝘮𝘶𝘤𝘩 easier for me to visualize transformations in terms of half-turns, quarter-turns, etc


since we can tell the browser just how many times the thing i’m rotating should turn around (without having to calculate anything) it makes rotations a hell of a lot easier ‼️


🔍 “𝚌𝚊𝚗 𝚠𝚎 𝚏𝚕𝚒𝚙 𝚝𝚑𝚒𝚜 𝚋𝚞𝚝𝚝𝚘𝚗 𝚘𝚗 𝚑𝚘𝚟𝚎𝚛?”

.button-flip:hover {
  transform: rotate(0.50turn);
}


🔍 “𝚝𝚑𝚎 𝚕𝚘𝚊𝚍𝚒𝚗𝚐 𝚒𝚌𝚘𝚗 𝚜𝚑𝚘𝚞𝚕𝚍 𝚜𝚙𝚒𝚗 𝚝𝚠𝚒𝚌𝚎 𝚎𝚟𝚎𝚛𝚢 𝚜𝚎𝚌𝚘𝚗𝚍”

.loading-icon {
  animation: rotate 1s infinite;
}

@keyframes rotate {
  100% {
    transform: rotate(2turn);
  }
}


💃🏻 you can check out the code at https://codepen.io/adamaso/pen/VwvmXLz


𝙛𝙚𝙚𝙡 𝙛𝙧𝙚𝙚 𝙩𝙤 𝙥𝙢 𝙢𝙚 𝙖𝙗𝙤𝙪𝙩 𝙖𝙣𝙮 𝙦𝙪𝙚𝙨𝙩𝙞𝙤𝙣𝙨! ✨