It all started a few months ago, when Chris Coyier casually asked me how would I move an element along a circle, without of course rotating the element itself. If I recall correctly, his solution was to use multiple keyframes, for various points on a circle’s circumference, approximating it. I couldn’t think of anything better at the time, but the question was stuck in the back of my head.

3 months ago, I came up with a first solution. Unfortunately, it required an extra wrapper element. The idea was to use two rotate transforms with different origins and opposite angles that cancel each other at any given time. The first transform-origin would be the center of the circle path and the other one the center of the element. Because we can’t use multiple transform-origins, a wrapper element was needed.

So, even though this solution was better, I wasn’t fully satisfied with it due to the need for the extra element. So, it kept being stuck in the back of my head.

Recently, I suggested to www-style that transform-origin should be a list and accept multiple origins and presented this example as a use case. And then Aryeh Gregor came up with this genius idea to prove that it’s already possible if you chain translate() transforms between the opposite rotates.

I simplified the code a bit, and here it is:

With the tools we currently have, I don’t think it gets any simpler than that.

Pingback: Rotating CSS elements – have some fun with CSS! | Oirs World()

Pingback: Web Design Weekly #30 | Web Design Weekly()

Pingback: La veille du week-end (vingt-quatrième) | LoïcG()

Pingback: 5 Use Cases for Icon Fonts | Web Development, Search Engine Optimization, Social Media Marketing Guru()

Pingback: 5 Use Cases for Icon Fonts | Lunarium Design()

Pingback: 5 Use Cases for Icon Fonts()

Pingback: 5 Use Cases for Icon Fonts | CSS-Tricks | Free Tattoo Font Generator Software For Unique Personalized Tattoo Designs()

Pingback: 5 Use Cases for Icon Fonts « My Portfolio Design()

Pingback: Moving an element along a circle | OTIS Web Workshop()

Pingback: Amazing CSS Demos | TechSlides()

Pingback: CSS Animation Tricks: State Jumping, Negative Delays, Animating Origin, and More | Beta Sites Galore()

Pingback: CSS Animation Tricks: State Jumping, Negative Delays, Animating Origin, and More | WarWebDev()

Pingback: CSS Animation Tricks: State Jumping, Negative Delays, Animating Origin, and More - Abstract PHP()

Pingback: Трюки с CSS-анимациями: мгновенные изменения, отрицательные задержки, анимация transform-origin и другое » ALeXVoz Blog()

Pingback: Трюки с CSS-анимациями: мгновенные изменения, отрицательные задержки, анимация transform-origin и другое | Вёрстка, интернет, SEO, WordPress, CSS, HTML5, маркети()

Pingback: 纯CSS实现圆周运动 + （针对IE的降级处理） | Fengshuo's Blog()

Pingback: Even More Interesting URL’s | Devorous()

Pingback: Трюки с CSS-анимациями: мгновенные изменения, отрицательные задержки, анимация transform-origin и другое | Блог web-разработчика()

Pingback: CSS Animation Tricks: State Jumping, Negative Delays, Animating Origin, and More | AsterHost()

Pingback: Trucchi sulle animazioni CSS | Laboratorio CSS()

Pingback: Wavy Gravy | Cataloupe()

Pingback: HTML5 Weekly No.25 | ENUE Blog()

Pingback: Smokie Does Stuff()

Pingback: pages/Habrahabr/page75.txt()

Pingback: Webmasters GalleryBasic Shapes & Path… Never the Twain Shall Meet? | Webmasters Gallery()

Pingback: Basic Shapes & Path… Never the Twain Shall Meet? |()

Pingback: Basic Shapes & Path… Never the Twain Shall Meet? – Dev-CT :: Technology and Developers News Blog()

Pingback: Basic Shapes & Path… Never the Twain Shall Meet? | Mcanous Design()

Pingback: Basic Shapes & Path… Never the Twain Shall Meet? - A Geek's View()

Pingback: Basic Shapes & Path… Never the Twain Shall Meet? | SeoRocketBar Network()

Pingback: Basic Shapes & Path… Never the Twain Shall Meet? | HailAds()

Pingback: Basic Shapes & Path… Never the Twain Shall Meet? | Graficznie()

Pingback: Basic Shapes & Path… Never the Twain Shall Meet? - Browser Zone()

Pingback: Basic Shapes & Path… Never the Twain Shall Meet? – ThinkTanks Blog()

Pingback: xmt85c4wx5ctwxw3tcerthve56()

Pingback: alcoholism facts()

Pingback: دانلود قسمت هشتم شهرزاد دوم()

Pingback: دانلود شهرزاد قسمت هفتم فصل دوم()

Pingback: دانلود شهرزاد قسمت دوازدهم فصل دوم()

Pingback: دانلود شهرزاد قسمت هشتم فصل دوم()

Pingback: دانلود شهرزاد قسمت نهم فصل دوم()

Pingback: قیمت پنجره()

Pingback: lesbian sex()

Pingback: دانلود قسمت 12 عاشقانه()

Pingback: دانلود قسمت ششم فصل دوم شهرزاد()

Pingback: دانلود قسمت دهم فصل دوم شهرزاد()

Pingback: دانلود قسمت 17 عاشقانه()

Pingback: دانلود قسمت 14عاشقانه()

Pingback: Ana Foxxx()

Pingback: Jessie Volt()

Pingback: Ana Foxxx()

Pingback: Peta Jensen()

Pingback: Angela White()

Pingback: Cherie DeVille()

Pingback: دانلود فصل دوم شهرزاد()

Pingback: hampton bay ceiling fan blog()

Pingback: sosyalmarketim sakin kullanmayin()

Pingback: Free Stuff Worldwide()

Pingback: Paleo Diet()

Pingback: casinos online Canada()

Pingback: watch movies online()

Pingback: دانلود قسمت 12 عاشقانه()

Pingback: دانلود سریال عاشقانه()

Pingback: دانلود قسمت اول شهرزاد دوم()

Pingback: Hunde skove i DK()

Pingback: Loyola College for Sale by CollegeDunia()

Pingback: دانلود قسمت 11 شهرزاد 2()

Pingback: دانلود قسمت دوازدهم عاشقانه()

Pingback: دانلود قسمت سوم شهرزاد دوم()

Pingback: دانلود قسمت پنجم شهرزاد دوم()

Pingback: دانلود قسمت 13 عاشقانه()

Pingback: دانلود قسمت اول شهرزاد دوم()

Pingback: Clemente()

Pingback: Admission via Good Donation in any medical college()

Pingback: porno()

Pingback: porno gratis()

Pingback: videos porno()

Pingback: porno()

Pingback: porno gratis()

Pingback: porno()

Pingback: porno gratis()

Pingback: videos porno()

Pingback: porno()

Pingback: porno gratis()

Pingback: porno()

Pingback: videos porno()

Pingback: porno()

Pingback: قیمت پنجره()

Pingback: دانلود قسمت 17 عاشقانه()

Pingback: دانلود فیلم سریال عاشقانه()

Pingback: شرکت تولیدی پنجره()

Pingback: capricorn man tells me he loves me()

Pingback: فروش پنجره دو سه جداره()

Pingback: پنجره دوجداره وین تک ویستابست()

Pingback: auto shipping()

Pingback: آموزش پنجره دوجداره()

Pingback: Acne Facial Treatments Pembroke Pines()

Pingback: Acne Facial Treatments Sunrise()

Pingback: Facial Spa Services Lazy Lake()

Pingback: Acne Facial Treatments Dania Beach()

Pingback: Facial Spa Services Weston()

Pingback: فروش توری()

Pingback: پنجره()

Pingback: دانلود موزیک()

Pingback: دانلود قسمت پنجم شهرزاد()

Pingback: casino games keno()

Pingback: دانلود قسمت ششم شهرزاد دوم()

Pingback: 18+()

Pingback: ratecompares.com()

Pingback: Roof Repair Long Island()

Pingback: Psp gaming console()

Pingback: buy zynga poker chips()

Pingback: the url of the site()

Pingback: jake burgess()

Pingback: unlimited clash royale gems()

Pingback: دانلود قسمت هفتم شهرزاد دوم()

Pingback: recessed lights()

Pingback: پنجره()

Pingback: پنجره()

Pingback: bitcoin hft()

Pingback: bitcoin hft()

Pingback: bitcoin hft()

Pingback: coin-banks exchange()

Pingback: coin-banks review()

Pingback: mlynek do kawy bosch mkm 6000()

Pingback: DraftKings DFS()

Pingback: bitcoin hft()

Pingback: coin-banks trading()

Pingback: bitcoin hft()

Pingback: Porn World()

Pingback: mdansby()

Pingback: funciona()

Pingback: دانلود قسمت هشتم شهرزاد()

Pingback: dans le mï¿½me sujet()

Pingback: anime()

Pingback: titleist 917()

Pingback: کول دانلول()

Pingback: vpm()

Pingback: دانلود شهرزاد قسمت 15()

Pingback: دانلود شهرزاد 13()

Pingback: پنجره دو سه جداره()

Pingback: دانلود شهرزاد قسمت سیزده 13()

Pingback: دانلود شهرزاد قسمت 15 پانزده()

Pingback: Strasbourg France()

Pingback: TRUSSARDI BAGS()

Pingback: vpn()

Pingback: Social Media Marketing()

Pingback: zobacz()

Pingback: http://ceri.civnet.org/Home/ViewBook/41()

Pingback: ΤΣΑΝΤΕΣ TRUSSARDI()

Pingback: zobacz()

Pingback: grossir le penis()

Pingback: excavator()

Pingback: 16 دانلود سریال شهرزاد()

Pingback: Reggie middleton()

Pingback: he said()

Pingback: دانلود شهرزاد قسمت 16()

Pingback: Jeanene()

Pingback: Roofing Long Island()

Pingback: 火锅()

Pingback: دانلود سریال عالجناب اول()

Pingback: دانلود سریال عالیجناب قسمت اول 1()

Pingback: دانلود فیلم()

Pingback: دانلود فیلم()

Pingback: دانلودسریال عالیجناب قسمت دوم()

Pingback: thestyleshoes()

Pingback: game()

Pingback: guia consulta cpf()

Pingback: teeth tmj()

Pingback: political polls twitter()

Pingback: FIRST TRY TRICKSHOT()

Pingback: Best Baby Crib Mattress()

Pingback: پنجره ضد سرقت ترک()

Pingback: Marquee hire prices in London()

Pingback: قیمت پنجره دوجداره در ایران()

Pingback: Atlanta artist Corey Barksdale()

Pingback: فروش توری پنجره()

Pingback: plumbing contractors()

Pingback: پنجره دوجداره وین تک()

Pingback: kids songs()

Pingback: Upholstery Cleaning harker heights TX()

Pingback: titleist 917 fairway wood()