Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Вращение изображения (https://javascript.ru/forum/misc/46549-vrashhenie-izobrazheniya.html)

hhh 14.04.2014 19:35
Вращение изображения
 
Как при загрузке страницы сделать чтобы вращалось изображение?
Через css3, keyframes получилось замутить. Только как запускать при загрузке затрудняюсь сделать.

Aetae 14.04.2014 20:42
М?
<style>
.fadeIn {
	border:5px solid #000;
	margin:15px auto;
	opacity:0;

	-webkit-animation:fadeIn ease-in 1;
	-moz-animation:fadeIn ease-in 1;
	-o-animation:fadeIn ease-in 1;
	animation:fadeIn ease-in 1;

	-webkit-animation-fill-mode:forwards;
	-moz-animation-fill-mode:forwards;
	-o-animation-fill-mode:forwards;
	animation-fill-mode:forwards;

	-webkit-animation-duration:3s;
	-moz-animation-duration:3s;
	-o-animation-duration:3s;
	animation-duration:3s;

	-webkit-animation-delay:3s;
	-moz-animation-delay:3s;
	-o-animation-delay:3s;
	animation-delay:3s;
}

@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-o-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
</style>
<img class="fadeIn" src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif">

hhh 14.04.2014 21:20
Спасибо, но это не вращение. С rotate не работает.

рони 14.04.2014 21:33
hhh,
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <style type="text/css">
img {
	animation: spin 1s linear infinite;
	animation-play-state: running;
}

@keyframes spin {
	to {
		transform: rotate(1turn);
	}
}
  </style>
</head>

<body>
<img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" alt="">
</body>

</html>

hhh 14.04.2014 21:59
Ура, спасибо! А как сделать чтобы вращнулось на 360 градусов, а потом обратно и остановилось. Именно так работает с transition, и мне так надо при загрузке:)

hhh 14.04.2014 22:23
Добавил - animation-iteration-count: 2 и останавливается. Только не могу понять как сделать чтобы назад два оборота сделал img и стоп.
Две анимации по очереди не работают.

рони 14.04.2014 22:26
hhh,
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <style type="text/css">
img {
	-webkit-animation: spin 5s ease-in-out;
	-moz-animation: spin 5s ease-in-out;
	-o-animation: spin 5s ease-in-out;
	animation: spin 5s ease-in-out;
    -webkit-animation-play-state: running;
    -moz-animation-play-state: running;
    -o-animation-play-state: running;
    animation-play-state: running;
}
@-webkit-keyframes spin {
	50% {
		-webkit-transform: rotate(1turn);
		-moz-transform: rotate(1turn);
		-o-transform: rotate(1turn);
		-ms-transform: rotate(1turn);
		transform: rotate(1turn);
	}
}
@keyframes spin {
	50% {
		-webkit-transform: rotate(1turn);
		-moz-transform: rotate(1turn);
		-o-transform: rotate(1turn);
		-ms-transform: rotate(1turn);
		transform: rotate(1turn);
	}
}
  </style>
</head>

<body>
<img src="http://img-fotki.yandex.ru/get/5907/annaze63.1af/0_5d68a_90b222f3_S" alt="">
</body>

</html>

hhh 14.04.2014 22:31
Спасибо! За что люблю этот форум, за то что тут всегда помогают всем.:write:

Coder_x 18.03.2016 18:32
Вращение изображения с помощью jquery и css
 
var total; глобальная переменная

в любое событие вставляете этот код

var image = $("#img");
total += 90;
image.css("transition","all 3s");
var rotate = "rotate(" + total + "deg)"
image.css("transform",rotate);

в данном случае угол поворота изображения составляет 90 градусов

вот вам простой код без плагинов !:)


Часовой пояс GMT +3, время: 09:45.