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

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

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