В этом уроке я покажу как использовать анимацию 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%.

Надеюсь Вам будет полезна данная статья.

Если у Вас возникли вопросы, пишите!