CSS 3d анимация на чистом CSS3

Анимированная CSS3 гистограмма. 3d гистограмма CSS3
Анимированная CSS3 гистограмма. 3d гистограмма CSS3
28/05/2017
CSS Эффект для Изображений c Иконкой, Заголовком и Описанием #16
CSS Эффект для Изображений c Иконкой, Заголовком и Описанием #16
29/05/2017
CSS 3d анимация на чистом CSS3

CSS 3d анимация на чистом CSS3

FULL DEMO

Мы знаем о CSS3 transition, но как создать 3D — эффект?

В Safari Reference Library, есть руководство визуальных эффектов Safari CSS Visual Effects Guide: Transforms. Эта страница описывает свойство CSS: -webkit-perspective.

Свойство perspective то, что нужно, чтобы создать 3D — эффект. Использование transform и transition поможет создать CSS 3d анимацию на чистом CSS3.

 Интернет — каталог интернет сайтов

Как обычно, используем HTML в качестве основы для данного эффекта. HTML не включает странных вещей, так как все «волшебство» будет происходить в CSS.

HTML
<ul id="movieposters">
   <li>
      <img src="images/01_iron_man_2.jpg" alt="Iron Man 2" />
      <div class="movieinfo">
         <h3>Iron Man 2</h3>
         <p>With the world now aware of his dual life as the armored superhero Iron Man, billionaire inventor Tony...</p>
         <a href="#" title="Iron Man 2">More info</a>
      </div>
   </li>
   <!-- Другие плакаты с фильмами здесь -->
</ul>

Это все, что нужно для создания нашего эффекта! Вы можете добавить больше киноплакатов (и данных) в список.

CSS
/* Основной список */
#movieposters
   { list-style:none; margin:100px 0; height:550px; }
   
#movieposters li
   { display:inline; float:left;
   -webkit-perspective: 500; -webkit-transform-style: preserve-3d;
   -webkit-transition-property: perspective; -webkit-transition-duration: 0.5s; }
   
#movieposters li:hover
   { -webkit-perspective: 5000; }
 
#movieposters li img
   { border:10px solid #fcfafa; -webkit-transform: rotateY(30deg);
   -moz-box-shadow:0 3px 10px #888; -webkit-box-shadow:0 3px 10px #888;
   -webkit-transition-property: transform; -webkit-transition-duration: 0.5s; }
 
/* Поворот назад при наведении на родительский элемент*/
#movieposters li:hover img
   { -webkit-transform: rotateY(0deg); }
 
.movieinfo { border:10px solid #fcfafa; padding:20px; width:200px; height:180px; background-color:#deddcd; margin:-195px 0 0 55px; position:absolute;
   -moz-box-shadow:0 20px 40px #888; -webkit-box-shadow:0 20px 40px #888;
   -webkit-transform: translateZ(30px) rotateY(30deg);
   -webkit-transition-property: transform, box-shadow, margin; -webkit-transition-duration: 0.5s; }
 
#movieposters li:hover .movieinfo
   { -webkit-transform: rotateY(0deg); -webkit-box-shadow:0 5px 10px #888; margin:-175px 0 0 30px; }
 
/* Базовые CSS для информации о фильме */
.movieinfo h3 { color:#7a3f3a; font-variant: small-caps; font-family:Georgia,serif,Times; text-align:center; padding-bottom:15px; }
.movieinfo p { padding-bottom:15px; }
.movieinfo a { background-color:#7a3f3a; padding:5px 10px; color:#eee; text-decoration:none; display:block; width:80px; text-align:center; margin:0 auto;
   -moz-border-radius:5px; -webkit-border-radius:5px; }
.movieinfo a:hover, .movieinfo a:focus { background-color:#6a191f; color:#fff; }

Вот и весь код, для красивой CSS 3d анимации!

Странности

Хотя эффект хорош, есть незначительные ошибки / причуды:

  • Иногда, когда вы наводите мышь на плакат, он не инициирует :hover эффект.
  • По какой-то причине, информационное окно быстро мерцает.

Если вы знаете , почему эти странности происходят (это CSS или реальная ошибка в -webkit), не стесняйтесь поделиться своими знаниями.

Заключение и Скачать

Несмотря на небольшие странности, конечный результат хорош.

Скачать

  • Iron Man 2

    Iron Man 2

    With the world now aware of his dual life as the armored superhero Iron Man, billionaire inventor Tony…

    More info

  • The Last Airbender

    The Last Airbender

    The story follows the adventures of Aang, a young successor to a long line of Avatars, who must put his…

    More info

  • Tron Legacy

    Tron Legacy

    Sam Flynn, the tech-savvy 27-year-old son of Kevin Flynn, looks into his father’s disappearance and finds…

    More info

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *