Главная / Блог / Эффект вращения с помощью CSS3

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

MasterNik / 06 июля 2013 г. / 4728 / Время чтения

Используя всего лишь 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

Источник информации для статьи ⤑

Если у вас есть вопросы по статье или нужна помощь в создании сайта, пишите нам в чат на сайте или Вконтакте. Не забудьте оставить свой e-mail и мы ответим в самое ближайшее время.

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

Другие статьи по теме:

7 рецептов для перехода между страницами. Красивые эффекты при загрузке страницы

Переходы между страницами выглядят очень, очень круто. Более того, они начинают появляться повсюду. Уверены, что вы, как и мы, не раз встречали в сети такие переходы, от которых у вас возникает восхищение и желание немедленно использовать их на своем сайте или в проекте.

17 апреля 2026 / 123

⤑

HOSTCMS v.6. Боковое выпадающее меню на CSS для каталога товаров

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

29 марта 2018 / 6886

⤑

Устаревший HTML код

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

4 марта 2022 / 2151

⤑

Переливающийся текст на CSS

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

5 марта 2024 / 1109

⤑

Как создать пользовательский ползунок диапазона с помощью CSS

Ползунки диапазона (<input type="range">) позволяют пользователям выбирать значение в пределах заданного диапазона, предоставляя альтернативные типы ввода, такие как <input type="number">.

24 мая 2023 / 3675

⤑

Анимация для текста на CSS

В наше время без анимационных эффектов на сайте просто не обойтись. Это и слайдеры и скроллеры, различного рода реагирования элементов дизайна при наведении на них мышкой, это анимация при прокрутке страниц и различные выезжающие, выплывающие, выползающие и т.д. блоки контента. Дизайнеры используют свою фантазию на 100%, чтобы их дсайт выделился из общей массы и запомнился Пользователям...

1 марта 2022 / 14801

⤑