Используя всего лишь 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> 
Другие статьи по теме:
Наша информация будет интересна тем, кто только начинает изучать и применять теги HTML5 при создании своих первых сайтов, а также в качестве справочной информации и для более опытных верстальщиков, чтобы не забывали.
sin()и cos().
Существует множество вариантов для определения размера и расположения фоновых изображений с помощью CSS. В этой статье мы рассмотрим, как использовать object-fit для размещения изображений на определенном пространстве и как использовать object-position для правильного позиционирования в этом пространстве.
Первая статья в этом году будет полностью посвящена цитатам в тексте и такому замечательному CSS тегу, как <blockquote>, а также оформлению цитат с помощью CSS стилей.
