Создание необычных эффектов на CCS3 в Drupal

 

 

Если вы откроете эту страницу либо с Safari или Chrome, то вы увидите небольшие 3D-эффекты происходящие с логотипом Drupal - он поднимается над страницей и летает по экрану.

Вы можете задаться вопросом: сколько же строк на jQuery было использовано или же для этого был использован Flash или что-то еще.

Ответ: ни одной строчки из jQuery, ни Falsh, ничего из перечисленного не было использовано. Только HTML 5 теги и небольшой на 40 строк CCS файл.

Хотите попробывать этот эффект на вашем сайте? Скопируйте данный код на любую страницу вашего Drupal 7 сайта и вы получите этот же эффект и у себя. Откройте вкладку Редактирование на сайте, отключите текстовый редактор и вставьте в самый верх  следующий код. Убедитесь в том, что формат ввода текста установлен на Full HTML, прежде чем нажать на кнопку Сохранить.

  1. </p><p>&nbsp;</p><p>
  2. <link href="https://flink.com.au/sites/default/files/fly.css" rel="stylesheet" type="text/css">
  3. </p><div id="rotate-home"><div id="rotateXY"><div id="rotateZ"><img src="/themes/seven/logo.png"></div></div></div><p>

 

 

Эффект так же работает и в блоках.

Вся css магия находится в этом файле