Солнечная система, нарисованная (не в масштабе) при помощи CSS3

    Alex Girón сочинил демонстрацию и к ней поясняющую блогозапись (с элементами исходного кода), посвящённые начертанию движущейся Солнечной системы при помощи border-radius, CSS-анимации и аффинных CSS-преобразований (а именно, анимированных поворотов от 0° до 360°).

    В Firefox эта демонстрация выглядит как неподвижная иллюстрация:

    [Солнечная система]

    В вебкитных браузерах (Chrome, Safari) планеты к тому же вращаются на своих орбитах.

    В Эксплорере вся система приобретает необычайный вид:

    [вид в IE]
    Метки:
    Поделиться публикацией
    Реклама помогает поддерживать и развивать наши сервисы

    Подробнее
    Реклама
    Комментарии 113
    • НЛО прилетело и опубликовало эту надпись здесь
      • +28
        Microsoft работает над правильной поддержкой Солнечной системы, в IE9 всё выглядит так:

        • +11
          Зря смеетесь, над Галлилеем тоже вначале подшучивали… :D
          • +1
            Стив Балмер:
            — это фича, а не баг! ))
          • +32
            Мицгол, вы ведь можете когда хотите :) Умничка.
            • +95
              Все сходится:

              habrahabr.ru/blogs/humour/93791/
              • –10
                На опере нет блика, это тонкий юмор?
                • +4
                  • +2
                    Это заслуженый минус на хабре ёпта))))))))))))))))
                    • +26
                      Э, дружок, щас я тебе покажу заслуженный минус.
                      Приготовились… барабанная дробь.

                      «Стив Джобс — долбится в зад!»

                      [смотри, щас набегут]
                      • –7
                        Ты ему завидуешь чтоль?
                        • –1
                          юмор, чувак, улыбайся чаще
                  • –11
                    Не сходится. У меня в опере выглядит как и в IE. Квадратная и статичная солнечная система.
                    • +5
                      обновлять оперу не пробовали? У меня круглая, хоть и статичная.
                      • +10
                        у меня ваще компьютера нету
                      • НЛО прилетело и опубликовало эту надпись здесь
                        • +5
                          Какого года «Опера»?
                          • +2
                            Последняя стабильная для Linux
                            • –1
                              не врите, у меня орбиты круглые на убунту, лучше скачайте последнюю все-таки
                              • +1
                                «Последняя стабильная» это 10.10. В 10.50 всё круглое, как полагается.
                                • 0
                                  так надо уточнять версию, а не «та которая мне нравится», у каждого свои критерии стабильности
                                  • НЛО прилетело и опубликовало эту надпись здесь
                                    • +1
                                      да, я протупил, качая снепшоты я не заметил что сама опера рекомендует на сайте версию для линукса 10.10 :(
                        • –2
                          Doraemon рулит
                        • +13
                          Наивный, он всё ещё думает сто в Солнечной системе 9 планет.
                          • +2
                            Но он же написал:
                            Oh, and yes… I kept Pluto ;-)
                            • НЛО прилетело и опубликовало эту надпись здесь
                              • +5
                                Это совершенно не отменяет того, что именно вот там что-то крутится :)
                                К тому же он рисует solar system, а не planetary system ;)
                              • –18
                                А чёй та пояс астероидов круглый у ИЕ? Я понимаю что автор стебется над Майкрософтом, но стеб уж больно натянутый. Неужели не всех еще это достало?
                              • 0
                                Занятно.
                                Интересно, а почему не вращается в ФФ?
                                • 0
                                  opera 10.53 тоже стоит.
                                  • +5
                                    а в 10.10 солнечная система еще не круглая
                                  • НЛО прилетело и опубликовало эту надпись здесь
                                  • 0
                                    В Сафари тормозит жестко…
                                    • +1
                                      На ипаде не тормозит
                                      • +21
                                        Ok, виноват — ужасно тормозит!
                                  • +8
                                    В IE просто не евклидово пространство, используется другая метрика. Ну и с орбит часть планет слетела, а так всё в порядке.
                                    • НЛО прилетело и опубликовало эту надпись здесь
                                      • +2
                                        Это подход Майкрософт. Если МС сказали, что орбиты планет должны быть квадратными, а планеты — статичными, если сказали, что только это обеспечит нормальную работу системы(солнечной, на других платформах не заработает), сказали, что квадратных орбит хватит всем, то «так и надо». Несомненно, что сейчас тысячи людей скажут: «Ну удобнее чем та, круглая! Её ещё настраивать надо!», «Да, там вертится, зато здесь игры!», да и просто: «Круглая система — г--о для студентов задротов!»
                                        • НЛО прилетело и опубликовало эту надпись здесь
                                          • НЛО прилетело и опубликовало эту надпись здесь
                                            • +3
                                              Люди из ООО «Майкрософт Рус» нервно вздрогнули от вашего комментария.
                                              • +1
                                                Артемий Татьянович Лебедев может пойти нахуй со своими правилами — названия не переводятся, поэтому применять к ним надо правила транслитерации.
                                        • +3
                                          Opera 10.00, всё квадратное.
                                          • 0
                                            ADD: кроме пояса астероидов, конечно.
                                            • +1
                                              10.53 — все в порядке.
                                              • +5
                                                Потому, что round-border добавили в 10.5
                                                • +3
                                                  Как это странно.
                                                • –11
                                                  Ой я не могу! Эксплорер жжет!
                                                  • +28
                                                    Вот оно- наше будущее… Хром, конечно, старается вовсю… 70-80% загрузки двухъядерного p9500/2.5G для рисования простейшей анимации… Жесть.
                                                    • +4
                                                      что-то мне вдруг захотелось отключить обновление у Фаерфокса.
                                                      • +26
                                                        и еще эти люди запрещают адобе ковыряться в носу))
                                                        • +1
                                                          а ведь показательно, +26 за коммент и -2 в карму. психологию можно изучать)
                                                        • 0
                                                          в то время сафари всё рисует гладко и проц кушает совсем малость, но почему-то думал, что будет наоборот =)
                                                          • +1
                                                            Mac OS X 10.5.8, Safari: тормозит до умопомрачения.
                                                            Ну, оно-то понятно почему: хардварную акселерацию для цсс3 и всего прочего только в снегопарде добавили…
                                                            • 0
                                                              Действительно, Chromium 48500 дергается, а в Safari все гладко.
                                                              У меня Snow Leopard 10.6.3.
                                                          • 0
                                                            Chromium 6.0.420.0 (48550) Ubuntu
                                                            Кушает один вирт проц на i5-430M, графика дергается, вцелом — жирненько.
                                                            • +3
                                                              Будущее здесь.

                                                              dl.dropbox.com/u/586279/futureishere.png

                                                              Правда дергаться оно от этого меньше не начинает.
                                                              • 0
                                                                На моем четырехядернике кушает ровно одно ядро, но полностью. Изображение ощутимо тормозит. В принципе, для процесса разрешено использование любых ядер, но он возможностью не пользуется, интересно, почему?
                                                                • 0
                                                                  Программировать на многоядерники видимо даже гугл не умеет!
                                                                • 0
                                                                  Chrome 5.0.375.38 beta (Ubuntu 10.04) — 98% от Core2Duo 2.4 = ( (
                                                                • +1
                                                                  не, это не солнечная система — Юпитер делает пол оборота за один земной год =)
                                                                  • +3
                                                                    Ну, залезьте в код, поиграйте в бога:)
                                                                  • 0
                                                                    В IE9 Preview все нормально, но статично…
                                                                    • –1
                                                                      у меня загрузка 7% на iMac 21,5 под Safari 4.0.5, при этом в фоне висят фотошоп, xCode, еще 5 вкладок сафари причем в одной флеш плеер играет музыку.

                                                                      не знаю что там у кого грузит )
                                                                      • +4
                                                                        у вас, должно быть, снегопард.
                                                                        а в нем у вэбкита хардварная акселерация всех этих хтмл5/цсс3 примочек
                                                                      • +1
                                                                        Для Микрософт до сих пор Солнце вращается вокруг земли :-)
                                                                        • НЛО прилетело и опубликовало эту надпись здесь
                                                                          • +27
                                                                            Квадратиш, практиш, гут!
                                                                            • +17
                                                                              На iPhone всё работает с анимацией и не тормозит:


                                                                              • 0
                                                                                а на герое притормаживает =\
                                                                                • 0
                                                                                  Вообще тормозит/не тормозит — понятие относительное. Я бы не сказал, что на моём iPhone 3G всё идёт прям гладко, хотя и больших тормозов я тоже не наблюдаю. Жалко, что демонстрация не выдаёт количество кадров в секунду.
                                                                                  • 0
                                                                                    Я имел ввиду, что на герое хорошо заметны рывки. Интересно было бы сравнить с 2.1 или 2.2 на том же железе…
                                                                                    • 0
                                                                                      Аналогично, на зевсе с прошей от гикфона 2.1 тормаза заметны, хотя и слабо. При этом очистка озу (у меня в фоне было примерно 15 программ + 1 достаточно немаленькая игрушка) ощутимой разницы не дала. В целом я оказался приятно удивлен, тем что работа мобильного браузера(кстати, получается он на вебките? не урезанный ли хром получается?) совпала по скорости с настольным хромом.
                                                                                      • +1
                                                                                        Извините, тормаза -> тормоза. Что это со мной…
                                                                                    • 0
                                                                                      Я тестировал на 3gs с 4.0beta4. Анимация максимально гладкая (фпс там явно больше 30).
                                                                                • +10
                                                                                  Не завидую я землянам, живущем в IE Солнечной системе. Всё-таки 4 раза в год адские огни из космоса уничтожающие километры поверхности Земли — это не очень приятно)
                                                                                  • +2
                                                                                    Зато столкновений нет — все строго квадратично! :)
                                                                                    • +2
                                                                                      А может леденящий холод? Диаметр нормальной орбиты равен стороне квадратной. Соответственно, на самом близком расстоянии к солнцу оно будет таким же, как и для нормальной орбиты. А вот в углах четырехугольника будет в 1.4 раза больше нормального.
                                                                                      • 0
                                                                                        Я про Главный пояс астероидов.
                                                                                        • 0
                                                                                          А я подумал про солнце.
                                                                                          Но это даже хорошо в условиях похолодания :-)
                                                                                      • +2
                                                                                        Строго говоря, в IE-системе не будет года и вообще движения по орбитам, так как нет анимации.
                                                                                        • 0
                                                                                          И к Солнцу, естественно, повёрнуто будет западное полушарие^W параллелепипед.
                                                                                      • +1
                                                                                        Вот как видим микрософт нашу вселенную и всех нас!
                                                                                        • 0
                                                                                          Кажется, сайт с солнечной системой словил всем известный эффект. Или нет?
                                                                                        • –1
                                                                                          Дополни, что в Opera вид системы такой же, как и в Firefox
                                                                                          • +2
                                                                                            Не совсем. На солнце нет блика.
                                                                                          • +2
                                                                                            Прекрасная иллюстрация IE :)
                                                                                            • 0
                                                                                              На Nexus One в родном браузере с Froyo картинка правильная, но статичная.
                                                                                              • 0
                                                                                                Представляю как щас автор страницы по ссылке недоумевает откуда сколько посетителей…
                                                                                                • +3
                                                                                                  Я думаю что он умеет пользоваться например аналитиксом :)
                                                                                                • 0
                                                                                                  а у меня во всех браузерах тормозит.
                                                                                                  Что-то мне не очень-то и нравится подобное использование HTML5, т.к. что бы браузеру отрисовать это на 28" мониторе (нужен для работы) — очень постараться нужно.
                                                                                                  • НЛО прилетело и опубликовало эту надпись здесь
                                                                                                  • +1
                                                                                                    Гг, вселенная Майкрософт (-:
                                                                                                    • 0
                                                                                                      Красиво смотрится в Chrome.
                                                                                                      Но так хочется позанудствовать...
                                                                                                      Здесь не только масштаб не сохранен (что еще можно простить). Почему Венера вращается в ту же сторону, что и остальные планеты? И почему Плутон, который уже давно не является планетой, тоже включен сюда? Уже либо отображать только 8 планет, либо включать все 4 планетоида.
                                                                                                      • НЛО прилетело и опубликовало эту надпись здесь
                                                                                                        • 0
                                                                                                          еще и не в одной плоскости
                                                                                                          • НЛО прилетело и опубликовало эту надпись здесь
                                                                                                      • +1
                                                                                                        Уважаю. Плутон — планета! И вобще всё что гидростатично и крутится вокруг солнца есть планета

                                                                                                        блин пол года рид-онли не получлось
                                                                                                        • 0
                                                                                                          Полгода чтения — это на другом бложике, и то там это давно уже не соблюдают.
                                                                                                        • 0
                                                                                                          тормозит дичайше в хроме на кор2дуо >
                                                                                                          • +1
                                                                                                            В полку извращений прибыло
                                                                                                            • 0
                                                                                                              linux, chrome 5.0.375.38 beta. тормозит невероятно (при том, что эмулятор денди на js работает почти на полной скоростои). закапывайте.
                                                                                                              • 0
                                                                                                                windows 7x64, chrome последний, 3 fps
                                                                                                                • +2
                                                                                                                  когда-то раньше то же самое можно делали на процессоре ~30мгц, а сейчас тормозит на 2000мгц…
                                                                                                                  вебкит не тормозит, вебкит не тормозит, вебкит не тормозит… :)
                                                                                                                  • –1
                                                                                                                    Мда, дожили…

                                                                                                                    Вот думаю, не перейти ли назад на Оперу 9.27, в ней прокрутка быстрее работает чем ов всех своременных браузерах, которые торомзят все сильнее и сильнее. Разве что Хром не тормозит с первого взгляда, но прокрутка там дерганая и память он жрет как 3 Оперы сразу.
                                                                                                                    • +2
                                                                                                                      Да, html5 все больше напоминает демосцену: делать максимум наименее приспособленными для этого средствами.
                                                                                                                      • 0
                                                                                                                        Интересно, но на Firefox 4 мало того ничего не вращается, так еще и планеты обрезанные наполовину.

                                                                                                                        Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.