Примечание №1:
Статья является переводом с данного источника. Уточнил, так как в песочнице нельзя отметить «Перевод».
На днях Google запустил впечатляющий doodle: 3D-интерактивный Кубик Рубика. Doodle, получившийся благодаря возможностям CSS и несколько нестандартным дизайнерским решением, является одним из самых трудных интерактивных проектов, выпадавшим на долю doodle-команды.
За 14 лет, что Google рисует их, doodle'ы успели отпраздновать все от культурных празднований до научных изобретений. 2 года назад любителям музыки был дарован Минимуг (монофонический синтезатор). А в 2010 олдскульщики получили возможность вернуться в прошлое и сыграть в Pac-Man на главной странице Google в честь 30-летия игры.
Лучшие doodle'ы всегда заключали себе как искусство, так и технологии. Но до недавнего времени команде не удавалось воплотить одно из своих видений в doodle. По крайней мере, так говорил тимлид doodle-команды Райан Гермик:
"[A Rubik's Cube Doodle] — эту идею нам предлагали на протяжении долгого времени, но мы считали, что технологии не позволят воплотить это в web"
В течении нескольких месяцев мнение главы команды изменилось. Несмотря на то, что Google Creative Lab называет «одним из самых технических doodle'ов», широкая поддержка CSS 3D-Transforms на большинстве браузеров позволило разработчикам быть уверенными в том, что Кубик Рубика смогут ощутить почти все пользователи.
"CSS 3D-Transforms может выводить куб в 3D пространстве, в отличие от другого вида представления изображения — растеризованного 2D. Куб как-будто становится живым, т.к. он полностью повторяет ваши действия мышью" — высказывается ведущий инженер Кристофер Хом.
Самой большой проблемой, как говорит Гермик, было довести все до простой и четкой функциональности. «С дизайнерской точки зрения, мы старались сделать продукт настолько чистым и незатейливым насколько это было возможно» — объясняет он.
В дополнение к 3D-головоломке, Google открыл исходники к проекту для тех, кто хочет внести изменения. Также они запустили Rubik's Cubes in Chrome Experiment, в связи с 40-летием появления чудо-игрушки на свет.
Примечание №2:
В создании дудла очень активно использовали JavaScript, но в статье об этом не сказали, на мой взгляд, пытались раскрыть возможности именно CSS Также хотелось бы показать предыдущие реализации Rubik's Cube Doodle:
Статья является переводом с данного источника. Уточнил, так как в песочнице нельзя отметить «Перевод».
На днях Google запустил впечатляющий doodle: 3D-интерактивный Кубик Рубика. Doodle, получившийся благодаря возможностям CSS и несколько нестандартным дизайнерским решением, является одним из самых трудных интерактивных проектов, выпадавшим на долю doodle-команды.
За 14 лет, что Google рисует их, doodle'ы успели отпраздновать все от культурных празднований до научных изобретений. 2 года назад любителям музыки был дарован Минимуг (монофонический синтезатор). А в 2010 олдскульщики получили возможность вернуться в прошлое и сыграть в Pac-Man на главной странице Google в честь 30-летия игры.
Лучшие doodle'ы всегда заключали себе как искусство, так и технологии. Но до недавнего времени команде не удавалось воплотить одно из своих видений в doodle. По крайней мере, так говорил тимлид doodle-команды Райан Гермик:
"[A Rubik's Cube Doodle] — эту идею нам предлагали на протяжении долгого времени, но мы считали, что технологии не позволят воплотить это в web"
В течении нескольких месяцев мнение главы команды изменилось. Несмотря на то, что Google Creative Lab называет «одним из самых технических doodle'ов», широкая поддержка CSS 3D-Transforms на большинстве браузеров позволило разработчикам быть уверенными в том, что Кубик Рубика смогут ощутить почти все пользователи.
"CSS 3D-Transforms может выводить куб в 3D пространстве, в отличие от другого вида представления изображения — растеризованного 2D. Куб как-будто становится живым, т.к. он полностью повторяет ваши действия мышью" — высказывается ведущий инженер Кристофер Хом.
Самой большой проблемой, как говорит Гермик, было довести все до простой и четкой функциональности. «С дизайнерской точки зрения, мы старались сделать продукт настолько чистым и незатейливым насколько это было возможно» — объясняет он.
В дополнение к 3D-головоломке, Google открыл исходники к проекту для тех, кто хочет внести изменения. Также они запустили Rubik's Cubes in Chrome Experiment, в связи с 40-летием появления чудо-игрушки на свет.
Примечание №2:
В создании дудла очень активно использовали JavaScript, но в статье об этом не сказали, на мой взгляд, пытались раскрыть возможности именно CSS Также хотелось бы показать предыдущие реализации Rubik's Cube Doodle:
Rubik's Doodles прошлых лет...