Эффект вращения с помощью CSS3

Эффект вращения с помощью CSS3

ПОСМОТРЕТЬ ДЕМО

Используя всего лишь CSS3 и подключения без javascript можно создать эффект вращающегося цветного колеса. 

Для этого в <body> вписываем код:

 <div id="colorWheel">
<span class="color01"></span>
<span class="color02"></span>
<span class="color03"></span>
<span class="color04"></span>
<span class="color05"></span>
<span class="color06"></span>
<span class="color07"></span>
<span class="color08"></span>
<span class="color09"></span>
<span class="color10"></span>
</div>

Далее используем CSS3 стили:

 <style type="text/css">
#colorWheel {
height: 100px;
width: 100px;
margin: 40px auto ;
position: absolute; left:10%;
-webkit-transform-origin: 50px 150px;
-moz-transform-origin: 50px 150px;
-ms-transform-origin: 50px 150px;
-o-transform-origin: 50px 150px;
transform-origin: 50px 150px;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
animation: wheel 10s ease-in-out infinite alternate;
-moz-animation: wheel 10s ease-in-out infinite alternate;
-webkit-animation: wheel 10s ease-in-out infinite alternate;
-ms-animation: wheel 10s ease-in-out infinite alternate;
}
@keyframes wheel{
0%{
opacity:1;
left:-10%;
transform:scale (.6) rotate (0deg);
}
50%{
opacity:.7}
100%{
left: 90%;
opacity:1;
transform:scale (1) rotate (2160deg);
}
}
@-webkit-keyframes wheel{
0%{
opacity:1;
left:-10%;
-webkit-transform:scale (.6) rotate (0deg);
}
50%{
opacity:.7;}
100%{
left: 90%;
opacity:1;
-webkit-transform:scale (1) rotate (2160deg);
}
}
@-moz-keyframes wheel{
0%{
opacity:1;
left:-10%;
-moz-transform:scale (.6) rotate (0deg);
}
50%{
opacity:.7;}
100%{
left: 90%;
opacity:1;
-moz-transform:scale (1) rotate (2160deg);
}
}
@-ms-keyframes wheel{
0%{
opacity:1;
left:-10%;
-ms-transform:scale (.6) rotate (0deg);
}
50%{
opacity:.7;}
100%{
left: 90%;
opacity:1;
-ms-transform:scale (1) rotate (2160deg);
}
}
#colorWheel:hover {}
#colorWheel span {
position: absolute;
-webkit-transform-origin: 50% 50%;
border-style: solid;
border-width: 150px 50px;
box-sizing: border-box;
}
#colorWheel span.color01 {
-webkit-transform: rotate (0deg);
-moz-transform: rotate (0deg);
-ms-transform: rotate (0deg);
-o-transform: rotate (0deg);
transform: rotate (0deg);
border-color: #43a1cd transparent transparent transparent;
}
#colorWheel span.color02 {
-webkit-transform: rotate (36deg);
-moz-transform: rotate (36deg);
-ms-transform: rotate (36deg);
-o-transform: rotate (36deg);
transform: rotate (36deg);
border-color: #639b47 transparent transparent transparent;
}
#colorWheel span.color03 {
-webkit-transform: rotate (72deg);
-moz-transform: rotate (72deg);
-ms-transform: rotate (72deg);
-o-transform: rotate (72deg);
transform: rotate (72deg);
border-color: #9ac147 transparent transparent transparent;
}
#colorWheel span.color04 {
-webkit-transform: rotate (108deg);
-moz-transform: rotate (108deg);
-ms-transform: rotate (108deg);
-o-transform: rotate (108deg);
transform: rotate (108deg);
border-color: #e1e23b transparent transparent transparent;
}
#colorWheel span.color05 {
-webkit-transform: rotate (144deg);
-moz-transform: rotate (144deg);
-ms-transform: rotate (144deg);
-o-transform: rotate (144deg);
transform: rotate (144deg);
border-color: #f7941e transparent transparent transparent;
}
#colorWheel span.color06 {
-webkit-transform: rotate (180deg);
-moz-transform: rotate (180deg);
-ms-transform: rotate (180deg);
-o-transform: rotate (180deg);
transform: rotate (180deg);
border-color: #ba3e2e transparent transparent transparent;
}
#colorWheel span.color07 {
-webkit-transform: rotate (216deg);
-moz-transform: rotate (216deg);
-ms-transform: rotate (216deg);
-o-transform: rotate (216deg);
transform: rotate (216deg);
border-color: #9a1d34 transparent transparent transparent;
}
#colorWheel span.color08 {
-webkit-transform: rotate (252deg);
-moz-transform: rotate (252deg);
-ms-transform: rotate (252deg);
-o-transform: rotate (252deg);
transform: rotate (252deg);
border-color: #662a6c transparent transparent transparent;
}
#colorWheel span.color09 {
-webkit-transform: rotate (288deg);
-moz-transform: rotate (288deg);
-ms-transform: rotate (288deg);
-o-transform: rotate (288deg);
transform: rotate (288deg);
border-color: #272b66 transparent transparent transparent;
}
#colorWheel span.color10 {
-webkit-transform: rotate (324deg);
-moz-transform: rotate (324deg);
-ms-transform: rotate (324deg);
-o-transform: rotate (324deg);
transform: rotate (324deg);
border-color: #2d559f transparent transparent transparent;
}
#colorWheel:before {
content:»»;
width: 300px;
height: 300px;
overflow: hidden;
position: absolute;
top: -30px;
left: -130px;
border-radius: 100%;
border: 30px solid #ffffff;
z-index: 100;
box-shadow:0px 0px 2px 12px rgba (180,180,180,.5)
}
#colorWheel:after {
content:»»;
width: 100px;
height: 100px;
overflow: hidden;
position: absolute;
top: 100px;
left: 0px;
border-radius: 100%;
box-shadow:0px 0px 2px 12px rgba (250,250,250,.5);
background: #444 url (Dhiraj.png); background-size:contain
}
</style>
Эффект вращения с помощью CSS3

Понравилась статья?
Будем признательны, если поделитесь в соцсетях или мессенджерах, а также присоединитесь к нашей группе Вконтакте. Будет интересно!

Вас может заинтересовать:

HOSTCMS v.6. Красивое горизонтальное выпадающее меню на CSS
HOSTCMS v.6. Красивое горизонтальное выпадающее меню на CSS
Меню адаптированно к использованию на сайтах под администрированием редакции HostCMS v.5 для вывода элементов каталога товаров. В выпадающем меню также выводится изображение подгруппы.

Понимание HTML5 и CSS3 для веб-дизайна
Понимание HTML5 и CSS3 для веб-дизайна
Наша информация будет интересна тем, кто только начинает изучать и применять теги HTML5 при создании своих первых сайтов, а также в качестве справочной информации и для более опытных верстальщиков, чтобы не забывали.

Анимированные ссылки
Анимированные ссылки
Создание эффектов наведения ссылок CSS может добавить немного изюминки на скучную веб-страницу. Если вы когда-либо оказывались в тупике, пытаясь создать эффект плавного наведения, у меня есть шесть CSS-эффектов, которые вы можете взять и использовать для своего следующего проекта.

Анимационные указатели прокрутки страницы
Анимационные указатели прокрутки страницы
Такие указатели чаще всего применяют на первом экране Главной страницы сайта, когда на ней размещена полноэкранная картинка, видео или слайдер. Чтобы показать Пользователю, что основной контент расположен ниже, в нижней части экрана размещают стрелку, направленную вниз. Чтобы привлечь к ней дополнительное внимание, её делаю анимационный...

Как использовать свойства CSS object-fit и object-position
Как использовать свойства CSS object-fit и object-position
Существует множество вариантов для определения размера и расположения фоновых изображений с помощью CSS. В этой статье мы рассмотрим, как использовать object-fit для размещения изображений на определенном пространстве и как использовать object-position для правильного позиционирования в этом пространстве.

Варианты оформления поля Поиска по сайту на CSS
Варианты оформления поля Поиска по сайту на CSS
Обычное поле Поиска по сайту можно оформить более оригинально, чем просто инпут с лупой. Например, благодаря анимационным эффектам на CSS3 поле для ввода поисковой фразы можно скрыть, чтобы освободить место для другого контента...

Мы используем файлы cookie. Они помогают улучшить ваше взаимодействие с сайтом.