Как реализовать подобное?

@Vector_ · Регистрация: 26.03.2013

Author24 — интернет-сервис помощи студентам

http://rolldecor.ru/fotozhalju... 5432084104 На этом сайте в разделе "Наши приимущества" вращаются шестерёнки Как реализовать подобное?

@Mikhail Shell · 02.01.2015, 14:23

На javascript обычно такое реализовывается, но можно на html и css. А делается это следующим образом:

HTML5

1	<img src="shesterenka.jpg"><!-- шестеренки можно сделать с помощью картинок !-->

CSS

img{
transform:rotate(360deg); /*поворачивается на 360 градусов вправо (если надо влево, то -360)*/
transition:3s;
}

Так вот

вместо 360 deg напиши 3000deg, или больше и время в transition, не 3 секунды а больше (предупреждаю крутиться будет невечно)

@Vector_ · 02.01.2015, 14:33 **[ТС]**

Mikhail Shell,

HTML5

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
    <body>
        <img id="img" src="http://lorempixel.com/400/200/">
        <script type="text/javascript">
        function foo()
        {
            var img = document.getElementById("img");
            img.style.transform += "rotate(1deg)";
        }   
            setInterval(foo, 30);
        
        </script>
    </body>
</html>

Вот так я реализовал примерно

@Mikhail Shell · 02.01.2015, 14:45

Я попробовал ваш код - все работает.
Только в атрибуте src добавьте формат файла.
Только вопрос по поводу атрибута lang в теге <html>. Это язык так задается или что то другое?

@monochromer · 02.01.2015, 15:51

На самом сайте сделано через animation и keyframes.

@Vector_ · 02.01.2015, 17:14 **[ТС]**

Mikhail Shell, http://htmlbook.ru/html/attr/lang

@Vector_ 0 / 0 / 0 Регистрация: 26.03.2013 Сообщений: 39
		1
	Как реализовать подобное? 02.01.2015, 14:06. Показов 1300. Ответов 5 Метки нет (Все метки) http://rolldecor.ru/fotozhalju... 5432084104 На этом сайте в разделе "Наши приимущества" вращаются шестерёнки Как реализовать подобное? 0

@Mikhail Shell 52 / 52 / 39 Регистрация: 15.11.2014 Сообщений: 696
	02.01.2015, 14:45	4
	Я попробовал ваш код - все работает. Только в атрибуте src добавьте формат файла. Только вопрос по поводу атрибута lang в теге <html>. Это язык так задается или что то другое? 0

@monochromer 419 / 381 / 163 Регистрация: 03.01.2013 Сообщений: 966
	02.01.2015, 15:51	5
	На самом сайте сделано через animation и keyframes. 0

@Vector_ 0 / 0 / 0 Регистрация: 26.03.2013 Сообщений: 39
	02.01.2015, 17:14 [ТС]	6
	Mikhail Shell, http://htmlbook.ru/html/attr/lang 0