Анимация CSS (transform:rotate) Вращаем объект на CSS
В этом уроке я покажу как использовать анимацию CSS для вращения объекта на 360 градусов. (transform:rotate (360deg)). Нажав просмотр Вы увидите что планета вращается вокруг своей оси.


Начнем. Я создал простую страницу HTML 5 для примера. Кстати, меню тоже создано с использованием HTML 5.
Структура html
<div class="earth"></div> <a href="#" title="Анимация CSS transform (rotate)"><div class="logo"></div></a> <div class="navigation"> <nav> <a class="m1" href="#" title="Home">Home</a><br/> <a class="m2" href="#" title="About">About</a><br/> <a class="m3" href="#" title="Portfolio">Portfolio</a><br/> <a class="m4" href="#" title="Blog">Blog</a><br/> <a class="m5" href="#" title="Contact">Contact</a> </nav> </div>
Сначала идет контейнер div (earth) - это и есть объект нашего урока (анимация CSS). Следующий блок div это логотип. И последним идет блок меню HTML 5 с тегом <nav>.
Код CSS
body { background: url('space.png') } .logo { background: url('nebula.png'); position:relative; width: 416px; height: 161px; margin-top: 5%; display: block; } .earth { background: url('earth3.png'); position:absolute; width: 500px; height: 472px; top: -130px; margin-left: 50%; -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); -moz-animation-name: earth; -moz-animation-duration: 77s; -webkit-animation-name: earth; -webkit-animation-duration: 77s; -moz-animation-timing-function: linear; -moz-animation-iteration-count: infinite; -moz-animation-direction: normal; -moz-animation-delay: 0; -moz-animation-play-state: running; -moz-animation-fill-mode: forwards; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: normal; -webkit-animation-delay: 0; -webkit-animation-play-state: running; -webkit-animation-fill-mode: forwards; } @-webkit-keyframes earth { 0% { -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); } 100% { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); } } @-moz-keyframes earth { 0% { -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); } 100% { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); } } .navigation { margin-left: 12%; font-size: 4em; text-decoration: none; font-family: Arial, serif; font-weight: bold; } .m1 { text-decoration: none; color: #f6f6f6; } .m2 { text-decoration: none; color: #f6f6f6; } .m3 { text-decoration: none; color: #f6f6f6; } .m4 { text-decoration: none; color: #f6f6f6; } .m5 { text-decoration: none; color: #f6f6f6; }
Давайте разберем вот этот отрывок кода:
.earth { background: url('earth3.png'); position:absolute; width: 500px; height: 472px; top: -130px; margin-left: 50%; -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); -moz-animation-name: earth; -moz-animation-duration: 77s; -webkit-animation-name: earth; -webkit-animation-duration: 77s; -moz-animation-timing-function: linear; -moz-animation-iteration-count: infinite; -moz-animation-direction: normal; -moz-animation-delay: 0; -moz-animation-play-state: running; -moz-animation-fill-mode: forwards; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: normal; -webkit-animation-delay: 0; -webkit-animation-play-state: running; -webkit-animation-fill-mode: forwards; } @-webkit-keyframes earth { 0% { -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); } 100% { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); } } @-moz-keyframes earth { 0% { -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); } 100% { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); } }
Собственно здесь и прописана вся анимация CSS. Сначала указано свойство transform: rotate(360deg);. Затем имя (earth), продолжительность в секундах (77s) и параметры которые отвечают за повторение, паузу вначале и т.д. После указываются описание ключевых кадров анимации CSS от 0 до 100%.
Надеюсь Вам будет полезна данная статья.
Если у Вас возникли вопросы, пишите!