Эффект вращения с помощью 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

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

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

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

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

Имитация стрелочных часов с помощью новых тригонометрических функций CSS sin() и cos ()
Имитация стрелочных часов с помощью новых тригонометрических функций CSS sin() и cos ()
Тригонометрические функции CSS есть в последних версиях Firefox и Safari. Наличие такого рода математической мощи в CSS открывает целую кучу возможностей. В этом материале мы применим пару новых функций: sin()и cos().

Фоновая волна на простом CSS
Фоновая волна на простом CSS
Рассмотрим в этой статье, как сделать фоновые волны на сайте, используя только возможности CSS3 и SVG файл. Т.е. без применения Javascript.

Бесплатный ФРОНТЭНД
Бесплатный ФРОНТЭНД
Представляю вашему вниманию бесплатные неоновые эффекты для текста на CSS...

Несколько полезных CSS-трюков для Front-end разработчиков
Несколько полезных CSS-трюков для Front-end разработчиков
Хотим поделиться с вами несколькими CSS трюками, которые вам точно пригодятся при создании сайтов. Они позволят вам без использования Javascript создать анимацию и эффекты.

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