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

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

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

Используя всего лишь 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 и мы ответим в самое ближайшее время.

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

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

Разные "вкусняшки" на CSS и HTML5 для начинающих вебдизайнеров

Подборка различных проектов с открытым кодом на CSS и HTML, от бордеров до слайдера, которые могут вам пригодиться при создании веб сайта.

27 февраля 2022 / 26507

⤑

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

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

1 марта 2022 / 14711

⤑

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

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

4 марта 2022 / 2130

⤑

Различные способы получить градиентную тень с помощью CSS (Gradient Shadows)

Это вопрос задают довольно часто: Можно ли создавать тени из градиентов вместо сплошных цветов? Нет конкретного свойства CSS, которое делает это, и любая информация, которую вы найдёте об этом, в основном представляет собой множество приемов CSS для аппроксимации градиента. Мы на самом деле рассмотрим некоторые из них по ходу дела.

6 апреля 2023 / 1761

⤑

Как использовать свойства CSS object-fit и object-position

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

23 июля 2023 / 2460

⤑

CSS в 2024 году: 17 функций, меняющих современный веб-дизайн

CSS 2024 демонстрирует 17 революционных обновлений, которые повышают эффективность веб-разработки благодаря расширенным возможностям компоновки, более плавной анимации и улучшенному взаимодействию с пользователем. Эти функции позволяют разработчикам создавать более динамичные, доступные и визуально привлекательные веб-сайты, чем когда-либо прежде.

20 декабря 2024 / 961

⤑