css3八卦,CSS3 八卦图推演漩涡

CSS

语言：

CSSSCSS

确定

div {

position: absolute;

-webkit-animation-timing-function: linear;

animation-timing-function: linear;

-webkit-animation-iteration-count: infinite;

animation-iteration-count: infinite;

}

body {

background-color: #36383b;

overflow: hidden;

}

.tier {

top: 50%;

left: 50%;

-webkit-animation-name: outer-rot;

animation-name: outer-rot;

}

.circle {

height: 20px;

border-radius: 60px;

-webkit-transform: translate(-50%);

-ms-transform: translate(-50%);

transform: translate(-50%);

}

@-webkit-keyframes outer-rot {

from {

-webkit-transform: rotate(0deg);

transform: rotate(0deg);

}

to {

-webkit-transform: rotate(360deg);

transform: rotate(360deg);

}

}

@keyframes outer-rot {

from {

-webkit-transform: rotate(0deg);

transform: rotate(0deg);

}

to {

-webkit-transform: rotate(360deg);

transform: rotate(360deg);

}

}

.t1 {

-webkit-animation-duration: 0.75s;

animation-duration: 0.75s;

}

.c1 {

top: 5px;

background-color: #cc2e1d;

width: 20px;

}

.circle-outer1:nth-of-type(1) {

-webkit-transform: rotate(0deg);

-ms-transform: rotate(0deg);

transform: rotate(0deg);

}

.circle-outer1:nth-of-type(2) {

-webkit-transform: rotate(120deg);

-ms-transform: rotate(120deg);

transform: rotate(120deg);

}

.circle-outer1:nth-of-type(3) {

-webkit-transform: rotate(240deg);

-ms-transform: rotate(240deg);

transform: rotate(240deg);

}

.t2 {

-webkit-animation-duration: 1.05s;

animation-duration: 1.05s;

}

.c2 {

top: 35px;

background-color: #cd3c21;

width: 24.44444px;

}

.circle-outer2:nth-of-type(1) {

-webkit-transform: rotate(0deg);

-ms-transform: rotate(0deg);

transform: rotate(0deg);

}

.circle-outer2:nth-of-type(2) {

-webkit-transform: rotate(60deg);

-ms-transform: rotate(60deg);

transform: rotate(60deg);

}

.circle-outer2:nth-of-type(3) {

-webkit-transform: rotate(120deg);

-ms-transform: rotate(120deg);

transform: rotate(120deg);

}

.circle-outer2:nth-of-type(4) {

-webkit-transform: rotate(180deg);

-ms-transform: rotate(180deg);

transform: rotate(180deg);

}

.circle-outer2:nth-of-type(5) {

-webkit-transform: rotate(240deg);

-ms-transform: rotate(240deg);

transform: rotate(240deg);

}

.circle-outer2:nth-of-type(6) {

-webkit-transform: rotate(300deg);

-ms-transform: rotate(300deg);

transform: rotate(300deg);

}

.t3 {

-webkit-animation-duration: 1.47s;

animation-duration: 1.47s;

}

.c3 {

top: 65px;

background-color: #cd4b26;

width: 28.88889px;

}

.circle-outer3:nth-of-type(1) {

-webkit-transform: rotate(0deg);

-ms-transform: rotate(0deg);

transform: rotate(0deg);

}

.circle-outer3:nth-of-type(2) {

-webkit-transform: rotate(40deg);

-ms-transform: rotate(40deg);

transform: rotate(40deg);

}

.circle-outer3:nth-of-type(3) {

-webkit-transform: rotate(80deg);

-ms-transform: rotate(80deg);

transform: rotate(80deg);

}

.circle-outer3:nth-of-type(4) {

-webkit-transform: rotate(120deg);

-ms-transform: rotate(120deg);

transform: rotate(120deg);

}

.circle-outer3:nth-of-type(5) {

-webkit-transform: rotate(160deg);

-ms-transform: rotate(160deg);

transform: rotate(160deg);

}

.circle-outer3:nth-of-type(6) {

-webkit-transform: rotate(200deg);

-ms-transform: rotate(200deg);

transform: rotate(200deg);

}

.circle-outer3:nth-of-type(7) {

-webkit-transform: rotate(240deg);

-ms-transform: rotate(240deg);

transform: rotate(240deg);

}

.circle-outer3:nth-of-type(8) {

-webkit-transform: rotate(280deg);

-ms-transform: rotate(280deg);

transform: rotate(280deg);

}

.circle-outer3:nth-of-type(9) {

-webkit-transform: rotate(320deg);

-ms-transform: rotate(320deg);

transform: rotate(320deg);

}

.t4 {

-webkit-animation-duration: 2.058s;

animation-duration: 2.058s;

}

.c4 {

top: 95px;

background-color: #ce592a;

width: 33.33333px;

}

.circle-outer4:nth-of-type(1) {

-webkit-transform: rotate(0deg);

-ms-transform: rotate(0deg);

transform: rotate(0deg);

}

.circle-outer4:nth-of-type(2) {

-webkit-transform: rotate(30deg);

-ms-transform: rotate(30deg);

transform: rotate(30deg);

}

.circle-outer4:nth-of-type(3) {

-webkit-transform: rotate(60deg);

-ms-transform: rotate(60deg);

transform: rotate(60deg);

}

.circle-outer4:nth-of-type(4) {

-webkit-transform: rotate(90deg);

-ms-transform: rotate(90deg);

transform: rotate(90deg);

}

.circle-outer4:nth-of-type(5) {

-webkit-transform: rotate(120deg);

-ms-transform: rotate(120deg);

transform: rotate(120deg);

}

.circle-outer4:nth-of-type(6) {

-webkit-transform: rotate(150deg);

-ms-transform: rotate(150deg);

transform: rotate(150deg);

}

.circle-outer4:nth-of-type(7) {

-webkit-transform: rotate(180deg);

-ms-transform: rotate(180deg);

transform: rotate(180deg);

}

.circle-outer4:nth-of-type(8) {

-webkit-transform: rotate(210deg);

-ms-transform: rotate(210deg);

transform: rotate(210deg);

}

.circle-outer4:nth-of-type(9) {

-webkit-transform: rotate(240deg);

-ms-transform: rotate(240deg);

transform: rotate(240deg);

}

.circle-outer4:nth-of-type(10) {

-webkit-transform: rotate(270deg);

-ms-transform: rotate(270deg);

transform: rotate(270deg);

}

.circle-outer4:nth-of-type(11) {

-webkit-transform: rotate(300deg);

-ms-transform: rotate(300deg);

transform: rotate(300deg);

}

.circle-outer4:nth-of-type(12) {

-webkit-transform: rotate(330deg);

-ms-transform: rotate(330deg);

transform: rotate(330deg);

}

.t5 {

-webkit-animation-duration: 2.8812s;

animation-duration: 2.8812s;

}

.c5 {

top: 125px;

background-color: #ce672f;

width: 37.77778px;

}

.circle-outer5:nth-of-type(1) {

-webkit-transform: rotate(0deg);

-ms-transform: rotate(0deg);

transform: rotate(0deg);

}

.circle-outer5:nth-of-type(2) {

-webkit-transform: rotate(24deg);

-ms-transform: rotate(24deg);

transform: rotate(24deg);

}

.circle-outer5:nth-of-type(3) {

-webkit-transform: rotate(48deg);

-ms-transform: rotate(48deg);

transform: rotate(48deg);

}

.circle-outer5:nth-of-type(4) {

-webkit-transform: rotate(72deg);

-ms-transform: rotate(72deg);

transform: rotate(72deg);

}

.circle-outer5:nth-of-type(5) {

-webkit-transform: rotate(96deg);

-ms-transform: rotate(96deg);

transform: rotate(96deg);

}

.circle-outer5:nth-of-type(6) {

-webkit-transform: rotate(120deg);

-ms-transform: rotate(120deg);

transform: rotate(120deg);

}

.circle-outer5:nth-of-type(7) {

-webkit-transform: rotate(144deg);

-ms-transform: rotate(144deg);

transform: rotate(144deg);

}

.circle-outer5:nth-of-type(8) {

-webkit-transform: rotate(168deg);

-ms-transform: rotate(168deg);

transform: rotate(168deg);

}

.circle-outer5:nth-of-type(9) {

-webkit-transform: rotate(192deg);

-ms-transform: rotate(192deg);

transform: rotate(192deg);

}

.circle-outer5:nth-of-type(10) {

-webkit-transform: rotate(216deg);

-ms-transform: rotate(216deg);

transform: rotate(216deg);

}

.circle-outer5:nth-of-type(11) {

-webkit-transform: rotate(240deg);

-ms-transform: rotate(240deg);

transform: rotate(240deg);

}

.circle-outer5:nth-of-type(12) {

-webkit-transform: rotate(264deg);

-ms-transform: rotate(264deg);

transform: rotate(264deg);

}

.circle-outer5:nth-of-type(13) {

-webkit-transform: rotate(288deg);

-ms-transform: rotate(288deg);

transform: rotate(288deg);

}

.circle-outer5:nth-of-type(14) {

-webkit-transform: rotate(312deg);

-ms-transform: rotate(312deg);

transform: rotate(312deg);

}

.circle-outer5:nth-of-type(15) {

-webkit-transform: rotate(336deg);

-ms-transform: rotate(336deg);

transform: rotate(336deg);

}

.t6 {

-webkit-animation-duration: 4.03368s;

animation-duration: 4.03368s;

}

.c6 {

top: 155px;

background-color: #cf7633;

width: 42.22222px;

}

.circle-outer6:nth-of-type(1) {

-webkit-transform: rotate(0deg);

-ms-transform: rotate(0deg);

transform: rotate(0deg);

}

.circle-outer6:nth-of-type(2) {

-webkit-transform: rotate(20deg);

-ms-transform: rotate(20deg);

transform: rotate(20deg);

}

.circle-outer6:nth-of-type(3) {

-webkit-transform: rotate(40deg);

-ms-transform: rotate(40deg);

transform: rotate(40deg);

}

.circle-outer6:nth-of-type(4) {

-webkit-transform: rotate(60deg);

-ms-transform: rotate(60deg);

transform: rotate(60deg);

}

.circle-outer6:nth-of-type(5) {

-webkit-transform: rotate(80deg);

-ms-transform: rotate(80deg);

transform: rotate(80deg);

}

.circle-outer6:nth-of-type(6) {

-webkit-transform: rotate(100deg);

-ms-transform: rotate(100deg);

transform: rotate(100deg);

}

.circle-outer6:nth-of-type(7) {

-webkit-transform: rotate(120deg);

-ms-transform: rotate(120deg);

transform: rotate(120deg);

}

.circle-outer6:nth-of-type(8) {

-webkit-transform: rotate(140deg);

-ms-transform: rotate(140deg);

transform: rotate(140deg);

}

.circle-outer6:nth-of-type(9) {

-webkit-transform: rotate(160deg);

-ms-transform: rotate(160deg);

transform: rotate(160deg);

}

.circle-outer6:nth-of-type(10) {

-webkit-transform: rotate(180deg);

-ms-transform: rotate(180deg);

transform: rotate(180deg);

}

.circle-outer6:nth-of-type(11) {

-webkit-transform: rotate(200deg);

-ms-transform: rotate(200deg);

transform: rotate(200deg);

}

.circle-outer6:nth-of-type(12) {

-webkit-transform: rotate(220deg);

-ms-transform: rotate(220deg);

transform: rotate(220deg);

}

.circle-outer6:nth-of-type(13) {

-webkit-transform: rotate(240deg);

-ms-transform: rotate(240deg);

transform: rotate(240deg);

}

.circle-outer6:nth-of-type(14) {

-webkit-transform: rotate(260deg);

-ms-transform: rotate(260deg);

transform: rotate(260deg);

}

.circle-outer6:nth-of-type(15) {

-webkit-transform: rotate(280deg);

-ms-transform: rotate(280deg);

transform: rotate(280deg);

}

.circle-outer6:nth-of-type(16) {

-webkit-transform: rotate(300deg);

-ms-transform: rotate(300deg);

transform: rotate(300deg);

}

.circle-outer6:nth-of-type(17) {

-webkit-transform: rotate(320deg);

-ms-transform: rotate(320deg);

transform: rotate(320deg);

}

.circle-outer6:nth-of-type(18) {

-webkit-transform: rotate(340deg);

-ms-transform: rotate(340deg);

transform: rotate(340deg);

}

.t7 {

-webkit-animation-duration: 5.64715s;

animation-duration: 5.64715s;

}

.c7 {

top: 185px;

background-color: #cf8438;

width: 46.66667px;

}

.circle-outer7:nth-of-type(1) {

-webkit-transform: rotate(0deg);

-ms-transform: rotate(0deg);

transform: rotate(0deg);

}

.circle-outer7:nth-of-type(2) {

-webkit-transform: rotate(17.14286deg);

-ms-transform: rotate(17.14286deg);

transform: rotate(17.14286deg);

}

.circle-outer7:nth-of-type(3) {

-webkit-transform: rotate(34.28571deg);

-ms-transform: rotate(34.28571deg);

transform: rotate(34.28571deg);

}

.circle-outer7:nth-of-type(4) {

-webkit-transform: rotate(51.42857deg);

-ms-transform: rotate(51.42857deg);

transform: rotate(51.42857deg);

}

.circle-outer7:nth-of-type(5) {

-webkit-transform: rotate(68.57143deg);

-ms-transform: rotate(68.57143deg);

transform: rotate(68.57143deg);

}

.circle-outer7:nth-of-type(6) {

-webkit-transform: rotate(85.71429deg);

-ms-transform: rotate(85.71429deg);

transform: rotate(85.71429deg);

}

.circle-outer7:nth-of-type(7) {

-webkit-transform: rotate(102.85714deg);

-ms-transform: rotate(102.85714deg);

transform: rotate(102.85714deg);

}

.circle-outer7:nth-of-type(8) {

-webkit-transform: rotate(120deg);

-ms-transform: rotate(120deg);

transform: rotate(120deg);

}

.circle-outer7:nth-of-type(9) {

-webkit-transform: rotate(137.14286deg);

-ms-transform: rotate(137.14286deg);

transform: rotate(137.14286deg);

}

.circle-outer7:nth-of-type(10) {

-webkit-transform: rotate(154.28571deg);

-ms-transform: rotate(154.28571deg);

transform: rotate(154.28571deg);

}

.circle-outer7:nth-of-type(11) {

-webkit-transform: rotate(171.42857deg);

-ms-transform: rotate(171.42857deg);

transform: rotate(171.42857deg);

}

.circle-outer7:nth-of-type(12) {

-webkit-transform: rotate(188.57143deg);

-ms-transform: rotate(188.57143deg);

transform: rotate(188.57143deg);

}

.circle-outer7:nth-of-type(13) {

-webkit-transform: rotate(205.71429deg);

-ms-transform: rotate(205.71429deg);

transform: rotate(205.71429deg);

}

.circle-outer7:nth-of-type(14) {

-webkit-transform: rotate(222.85714deg);

-ms-transform: rotate(222.85714deg);

transform: rotate(222.85714deg);

}

.circle-outer7:nth-of-type(15) {

-webkit-transform: rotate(240deg);

-ms-transform: rotate(240deg);

transform: rotate(240deg);

}

.circle-outer7:nth-of-type(16) {

-webkit-transform: rotate(257.14286deg);

-ms-transform: rotate(257.14286deg);

transform: rotate(257.14286deg);

}

.circle-outer7:nth-of-type(17) {

-webkit-transform: rotate(274.28571deg);

-ms-transform: rotate(274.28571deg);

transform: rotate(274.28571deg);

}

.circle-outer7:nth-of-type(18) {

-webkit-transform: rotate(291.42857deg);

-ms-transform: rotate(291.42857deg);

transform: rotate(291.42857deg);

}

.circle-outer7:nth-of-type(19) {

-webkit-transform: rotate(308.57143deg);

-ms-transform: rotate(308.57143deg);

transform: rotate(308.57143deg);

}

.circle-outer7:nth-of-type(20) {

-webkit-transform: rotate(325.71429deg);

-ms-transform: rotate(325.71429deg);

transform: rotate(325.71429deg);

}

.circle-outer7:nth-of-type(21) {

-webkit-transform: rotate(342.85714deg);

-ms-transform: rotate(342.85714deg);

transform: rotate(342.85714deg);

}

.t8 {

-webkit-animation-duration: 7.90601s;

animation-duration: 7.90601s;

}

.c8 {

top: 215px;

background-color: #d0923c;

width: 51.11111px;

}

.circle-outer8:nth-of-type(1) {

-webkit-transform: rotate(0deg);

-ms-transform: rotate(0deg);

transform: rotate(0deg);

}

.circle-outer8:nth-of-type(2) {

-webkit-transform: rotate(15deg);

-ms-transform: rotate(15deg);

transform: rotate(15deg);

}

.circle-outer8:nth-of-type(3) {

-webkit-transform: rotate(30deg);

-ms-transform: rotate(30deg);

transform: rotate(30deg);

}

.circle-outer8:nth-of-type(4) {

-webkit-transform: rotate(45deg);

-ms-transform: rotate(45deg);

transform: rotate(45deg);

}

.circle-outer8:nth-of-type(5) {

-webkit-transform: rotate(60deg);

-ms-transform: rotate(60deg);

transform: rotate(60deg);

}

.circle-outer8:nth-of-type(6) {

-webkit-transform: rotate(75deg);

-ms-transform: rotate(75deg);

transform: rotate(75deg);

}

.circle-outer8:nth-of-type(7) {

-webkit-transform: rotate(90deg);

-ms-transform: rotate(90deg);

transform: rotate(90deg);

}

.circle-outer8:nth-of-type(8) {

-webkit-transform: rotate(105deg);

-ms-transform: rotate(105deg);

transform: rotate(105deg);

}

.circle-outer8:nth-of-type(9) {

-webkit-transform: rotate(120deg);

-ms-transform: rotate(120deg);

transform: rotate(120deg);

}

.circle-outer8:nth-of-type(10) {

-webkit-transform: rotate(135deg);

-ms-transform: rotate(135deg);

transform: rotate(135deg);

}

.circle-outer8:nth-of-type(11) {

-webkit-transform: rotate(150deg);

-ms-transform: rotate(150deg);

transform: rotate(150deg);

}

.circle-outer8:nth-of-type(12) {

-webkit-transform: rotate(165deg);

-ms-transform: rotate(165deg);

transform: rotate(165deg);

}

.circle-outer8:nth-of-type(13) {

-webkit-transform: rotate(180deg);

-ms-transform: rotate(180deg);

transform: rotate(180deg);

}

.circle-outer8:nth-of-type(14) {

-webkit-transform: rotate(195deg);

-ms-transform: rotate(195deg);

transform: rotate(195deg);

}

.circle-outer8:nth-of-type(15) {

-webkit-transform: rotate(210deg);

-ms-transform: rotate(210deg);

transform: rotate(210deg);

}

.circle-outer8:nth-of-type(16) {

-webkit-transform: rotate(225deg);

-ms-transform: rotate(225deg);

transform: rotate(225deg);

}

.circle-outer8:nth-of-type(17) {

-webkit-transform: rotate(240deg);

-ms-transform: rotate(240deg);

transform: rotate(240deg);

}

.circle-outer8:nth-of-type(18) {

-webkit-transform: rotate(255deg);

-ms-transform: rotate(255deg);

transform: rotate(255deg);

}

.circle-outer8:nth-of-type(19) {

-webkit-transform: rotate(270deg);

-ms-transform: rotate(270deg);

transform: rotate(270deg);

}

.circle-outer8:nth-of-type(20) {

-webkit-transform: rotate(285deg);

-ms-transform: rotate(285deg);

transform: rotate(285deg);

}

.circle-outer8:nth-of-type(21) {

-webkit-transform: rotate(300deg);

-ms-transform: rotate(300deg);

transform: rotate(300deg);

}

.circle-outer8:nth-of-type(22) {

-webkit-transform: rotate(315deg);

-ms-transform: rotate(315deg);

transform: rotate(315deg);

}

.circle-outer8:nth-of-type(23) {

-webkit-transform: rotate(330deg);

-ms-transform: rotate(330deg);

transform: rotate(330deg);

}

.circle-outer8:nth-of-type(24) {

-webkit-transform: rotate(345deg);

-ms-transform: rotate(345deg);

transform: rotate(345deg);

}

.t9 {

-webkit-animation-duration: 11.06842s;

animation-duration: 11.06842s;

}

.c9 {

top: 245px;

background-color: #d0a141;

width: 55.55556px;

}

.circle-outer9:nth-of-type(1) {

-webkit-transform: rotate(0deg);

-ms-transform: rotate(0deg);

transform: rotate(0deg);

}

.circle-outer9:nth-of-type(2) {

-webkit-transform: rotate(13.33333deg);

-ms-transform: rotate(13.33333deg);

transform: rotate(13.33333deg);

}

.circle-outer9:nth-of-type(3) {

-webkit-transform: rotate(26.66667deg);

-ms-transform: rotate(26.66667deg);

transform: rotate(26.66667deg);

}

.circle-outer9:nth-of-type(4) {

-webkit-transform: rotate(40deg);

-ms-transform: rotate(40deg);

transform: rotate(40deg);

}

.circle-outer9:nth-of-type(5) {

-webkit-transform: rotate(53.33333deg);

-ms-transform: rotate(53.33333deg);

transform: rotate(53.33333deg);

}

.circle-outer9:nth-of-type(6) {

-webkit-transform: rotate(66.66667deg);

-ms-transform: rotate(66.66667deg);

transform: rotate(66.66667deg);

}

.circle-outer9:nth-of-type(7) {

-webkit-transform: rotate(80deg);

-ms-transform: rotate(80deg);

transform: rotate(80deg);

}

.circle-outer9:nth-of-type(8) {

-webkit-transform: rotate(93.33333deg);

-ms-transform: rotate(93.33333deg);

transform: rotate(93.33333deg);

}

.circle-outer9:nth-of-type(9) {

-webkit-transform: rotate(106.66667deg);

-ms-transform: rotate(106.66667deg);

transform: rotate(106.66667deg);

}

.circle-outer9:nth-of-type(10) {

-webkit-transform: rotate(120deg);

-ms-transform: rotate(120deg);

transform: rotate(120deg);

}

.circle-outer9:nth-of-type(11) {

-webkit-transform: rotate(133.33333deg);

-ms-transform: rotate(133.33333deg);

transform: rotate(133.33333deg);

}

.circle-outer9:nth-of-type(12) {

-webkit-transform: rotate(146.66667deg);

-ms-transform: rotate(146.66667deg);

transform: rotate(146.66667deg);

}

.circle-outer9:nth-of-type(13) {

-webkit-transform: rotate(160deg);

-ms-transform: rotate(160deg);

transform: rotate(160deg);

}

.circle-outer9:nth-of-type(14) {

-webkit-transform: rotate(173.33333deg);

-ms-transform: rotate(173.33333deg);

transform: rotate(173.33333deg);

}

.circle-outer9:nth-of-type(15) {

-webkit-transform: rotate(186.66667deg);

-ms-transform: rotate(186.66667deg);

transform: rotate(186.66667deg);

}

.circle-outer9:nth-of-type(16) {

-webkit-transform: rotate(200deg);

-ms-transform: rotate(200deg);

transform: rotate(200deg);

}

.circle-outer9:nth-of-type(17) {

-webkit-transform: rotate(213.33333deg);

-ms-transform: rotate(213.33333deg);

transform: rotate(213.33333deg);

}

.circle-outer9:nth-of-type(18) {

-webkit-transform: rotate(226.66667deg);

-ms-transform: rotate(226.66667deg);

transform: rotate(226.66667deg);

}

.circle-outer9:nth-of-type(19) {

-webkit-transform: rotate(240deg);

-ms-transform: rotate(240deg);

transform: rotate(240deg);

}

.circle-outer9:nth-of-type(20) {

-webkit-transform: rotate(253.33333deg);

-ms-transform: rotate(253.33333deg);

transform: rotate(253.33333deg);

}

.circle-outer9:nth-of-type(21) {

-webkit-transform: rotate(266.66667deg);

-ms-transform: rotate(266.66667deg);

transform: rotate(266.66667deg);

}

.circle-outer9:nth-of-type(22) {

-webkit-transform: rotate(280deg);

-ms-transform: rotate(280deg);

transform: rotate(280deg);

}

.circle-outer9:nth-of-type(23) {

-webkit-transform: rotate(293.33333deg);

-ms-transform: rotate(293.33333deg);

transform: rotate(293.33333deg);

}

.circle-outer9:nth-of-type(24) {

-webkit-transform: rotate(306.66667deg);

-ms-transform: rotate(306.66667deg);

transform: rotate(306.66667deg);

}

.circle-outer9:nth-of-type(25) {

-webkit-transform: rotate(320deg);

-ms-transform: rotate(320deg);

transform: rotate(320deg);

}

.circle-outer9:nth-of-type(26) {

-webkit-transform: rotate(333.33333deg);

-ms-transform: rotate(333.33333deg);

transform: rotate(333.33333deg);

}

.circle-outer9:nth-of-type(27) {

-webkit-transform: rotate(346.66667deg);

-ms-transform: rotate(346.66667deg);

transform: rotate(346.66667deg);

}

.circle-outer9:nth-of-type(28) {

-webkit-transform: rotate(360deg);

-ms-transform: rotate(360deg);

transform: rotate(360deg);

}