Google Do a Barrel Roll

Когда пользователь вводит в поисковой строке Google запрос "do a barrel roll", страница Google начинает вращаться по горизонтали на 360 градусов. Этот эффект можно достичь с помощью CSS3 свойства "transform" и JavaScript.

Ниже приведен пример кода, который позволяет реализовать эффект "do a barrel roll" на веб-странице:

HTML:

html
Do a Barrel Roll

CSS:

css
.transformed {
  transition: transform 1s;
  transform: rotate(360deg);
}

JavaScript:

javascript
function doBarrelRoll() {
  var googleLogo = document.getElementById('googleLogo');
  googleLogo.classList.add('transformed');
}

В этом примере кнопка с надписью "Do a Barrel Roll" создается в HTML. При нажатии на кнопку, вызывается функция `doBarrelRoll()` в JavaScript. Внутри этой функции получаем ссылку на элемент с id "googleLogo" (например, логотип Google), и добавляем ему класс "transformed". Этот класс задает анимацию вращения с использованием CSS свойства "transform" и перехода с использованием CSS свойства "transition", добавляя соответствующие значения. Таким образом, логотип начинает выполнение анимации "do a barrel roll".