» » Как придать кручение элементу на странице?

Как придать кручение элементу на странице?

28-06-2014, 14:55
Автор: .
Просмотров: 1 095
Комментариев: 0
Версия для печати

Как придать кручение элементу на странице?

 

Как при помощи css придать кручение и верчение любому элементу на странице? Специально сформированными правилами для webkit ориентированных браузеров. Кросс-браузерно сделать можно, комбинируя css с js

 	 .rotate {
	-webkit-animation-name: rotation;
	-webkit-animation-duration: 800ms;
	-webkit-animation-iteration-count: 5;
	-webkit-animation-timing-function: linear;
	-moz-animation-name: rotation;
	-moz-animation-duration: 800ms;
	-moz-animation-iteration-count: 5;
	-moz-animation-timing-function: linear;
	-o-animation-name: rotation;
	-o-animation-duration: 800ms;
	-o-animation-iteration-count: 5;
	-o-animation-timing-function: linear;
	animation-name: rotation;
	animation-duration: 800ms;
	animation-iteration-count: 5;
	animation-timing-function: linear;
	}
	
		
	@-webkit-keyframes rotation {
	0% {-webkit-transform:rotate(0deg);
	-moz-transform:rotate(0deg);
	-o-transform:rotate(0deg);
	transform:rotate(0deg);}
	100% {-webkit-transform:rotate(360deg);
	-moz-transform:rotate(360deg);
	-o-transform:rotate(360deg);
	transform:rotate(360deg);}
	}
	@-moz-keyframes rotation {
	0% {-webkit-transform:rotate(0deg);
	-moz-transform:rotate(0deg);
	-o-transform:rotate(0deg);
	transform:rotate(0deg);}
	100% {-webkit-transform:rotate(360deg);
	-moz-transform:rotate(360deg);
	-o-transform:rotate(360deg);
	transform:rotate(360deg);}
	}
	@-o-keyframes rotation {
	0% {-webkit-transform:rotate(0deg);
	-moz-transform:rotate(0deg);
	-o-transform:rotate(0deg);
	transform:rotate(0deg);}
	100% {-webkit-transform:rotate(360deg);
	-moz-transform:rotate(360deg);
	-o-transform:rotate(360deg);
	transform:rotate(360deg);}
	}
	@keyframes rotation {
	0% {-webkit-transform:rotate(0deg);
	-moz-transform:rotate(0deg);
	-o-transform:rotate(0deg);
	transform:rotate(0deg);}
	100% {-webkit-transform:rotate(360deg);
	-moz-transform:rotate(720deg);
	-o-transform:rotate(360deg);
	transform:rotate(360deg);}
	}
	 .rotate_one {
	-webkit-animation-name: rotation_one;
	-webkit-animation-duration: 800ms;
	-webkit-animation-iteration-count: 5;
	-webkit-animation-timing-function: linear;
	-moz-animation-name: rotation_one;
	-moz-animation-duration: 800ms;
	-moz-animation-iteration-count: 5;
	-moz-animation-timing-function: linear;
	-o-animation-name: rotation_one;
	-o-animation-duration: 800ms;
	-o-animation-iteration-count: 5;
	-o-animation-timing-function: linear;
	animation-name: rotation_one;
	animation-duration: 800ms;
	animation-iteration-count: 5;
	animation-timing-function: linear;
	}
	
		
	@-webkit-keyframes rotation_one {
	0% {-webkit-transform:rotate(0deg);
	-moz-transform:rotate(0deg);
	-o-transform:rotate(0deg);
	transform:rotate(0deg);}
	100% {-webkit-transform:rotate(360deg);
	-moz-transform:rotate(360deg);
	-o-transform:rotate(360deg);
	transform:rotate(360deg);}
	}
	@-moz-keyframes rotation_one {
	0% {-webkit-transform:rotate(0deg);
	-moz-transform:rotate(0deg);
	-o-transform:rotate(0deg);
	transform:rotate(0deg);}
	100% {-webkit-transform:rotate(360deg);
	-moz-transform:rotate(360deg);
	-o-transform:rotate(360deg);
	transform:rotate(360deg);}
	}
	@-o-keyframes rotation_one {
	0% {-webkit-transform:rotate(0deg);
	-moz-transform:rotate(0deg);
	-o-transform:rotate(0deg);
	transform:rotate(0deg);}
	100% {-webkit-transform:rotate(360deg);
	-moz-transform:rotate(360deg);
	-o-transform:rotate(360deg);
	transform:rotate(360deg);}
	}
	@keyframes rotation_one {
	0% {-webkit-transform:rotate(0deg);
	-moz-transform:rotate(0deg);
	-o-transform:rotate(0deg);
	transform:rotate(0deg);}
	100% {-webkit-transform:rotate(360deg);
	-moz-transform:rotate(720deg);
	-o-transform:rotate(360deg);
	transform:rotate(360deg);}
	}
	 .rotate_sun {
	-webkit-animation-name: rotation_sun;
	-webkit-animation-duration: 10s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	-moz-animation-name: rotation_sun;
	-moz-animation-duration: 10s;
	-moz-animation-iteration-count: infinite;
	-moz-animation-timing-function: linear;
	-o-animation-name: rotation_sun;
	-o-animation-duration: 10s;
	-o-animation-iteration-count: infinite;
	-o-animation-timing-function: linear;
	animation-name: rotation_sun;
	animation-duration: 10s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-direction:alternate;
	}
	
		
	@-webkit-keyframes rotation_sun {
	
		
	0% {-webkit-transform:rotate(0deg);
	-moz-transform:rotate(0deg);
	-o-transform:rotate(0deg);
	transform:rotate(0deg);}
	25% {-webkit-transform:rotate(-2deg);
	-moz-transform:rotate(-2deg);
	-o-transform:rotate(-2deg);
	transform:rotate(-2deg);}
	50% {-webkit-transform:rotate(0deg);
	-moz-transform:rotate(0deg);
	-o-transform:rotate(0deg);
	transform:rotate(0deg);}
	75% {-webkit-transform:rotate(2deg);
	-moz-transform:rotate(2deg);
	-o-transform:rotate(2deg);
	transform:rotate(2deg);}
	
		
	100% {-webkit-transform:rotate(0deg);
	-moz-transform:rotate(0deg);
	-o-transform:rotate(0deg);
	transform:rotate(0deg);}
	}
	@-moz-keyframes rotation_sun {
	0% {-webkit-transform:rotate(0deg);
	-moz-transform:rotate(0deg);
	-o-transform:rotate(0deg);
	transform:rotate(0deg);}
	25% {-webkit-transform:rotate(-2deg);
	-moz-transform:rotate(-2deg);
	-o-transform:rotate(-2deg);
	transform:rotate(-2deg);}
	50% {-webkit-transform:rotate(0deg);
	-moz-transform:rotate(0deg);
	-o-transform:rotate(0deg);
	transform:rotate(0deg);}
	75% {-webkit-transform:rotate(2deg);
	-moz-transform:rotate(2deg);
	-o-transform:rotate(2deg);
	transform:rotate(2deg);}
	100% {-webkit-transform:rotate(0deg);
	-moz-transform:rotate(0deg);
	-o-transform:rotate(0deg);
	transform:rotate(0deg);}
	}
	@-o-keyframes rotation_sun {
	
		
	0% {-webkit-transform:rotate(0deg);
	-moz-transform:rotate(0deg);
	-o-transform:rotate(0deg);
	transform:rotate(0deg);}
	25% {-webkit-transform:rotate(-2deg);
	-moz-transform:rotate(-2deg);
	-o-transform:rotate(-2deg);
	transform:rotate(-2deg);}
	50% {-webkit-transform:rotate(0deg);
	-moz-transform:rotate(0deg);
	-o-transform:rotate(0deg);
	transform:rotate(0deg);}
	75% {-webkit-transform:rotate(2deg);
	-moz-transform:rotate(2deg);
	-o-transform:rotate(2deg);
	transform:rotate(2deg);}
	
		
	100% {-webkit-transform:rotate(0deg);
	-moz-transform:rotate(0deg);
	-o-transform:rotate(0deg);
	transform:rotate(0deg);}
	}
	@keyframes rotation_sun {
	0% {-webkit-transform:rotate(0deg);
	-moz-transform:rotate(0deg);
	-o-transform:rotate(0deg);
	transform:rotate(0deg);}
	25% {-webkit-transform:rotate(-2deg);
	-moz-transform:rotate(-2deg);
	-o-transform:rotate(-2deg);
	transform:rotate(-2deg);}
	50% {-webkit-transform:rotate(0deg);
	-moz-transform:rotate(0deg);
	-o-transform:rotate(0deg);
	transform:rotate(0deg);}
	75% {-webkit-transform:rotate(2deg);
	-moz-transform:rotate(2deg);
	-o-transform:rotate(2deg);
	transform:rotate(2deg);}
	
		
	100% {-webkit-transform:rotate(0deg);
	-moz-transform:rotate(0deg);
	-o-transform:rotate(0deg);
	transform:rotate(0deg);}
	}
	
		
	
		
	
		

Рейтинг статьи:
  
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо зайти на сайт под своим именем.