css打造粒子梦幻星空旋转效果
代码语言:html
所属分类:粒子
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> - Perticle Rotation #05</title> <style> /* basic style */ html, body { position: relative; overflow: hidden; } body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background: radial-gradient(ellipse at left top, #e6a702 20%, #b27e06 50%, #795302); } div { transform-style: preserve-3d; } .container { perspective: 1600px; } .container_rotate { transform: rotateX(90deg); } /* flip style */ .flip { position: absolute; top: -280px; width: 1.6vw; height: 1.6vw; border-radius: 50%; } .rotate:nth-of-type(1) { animation: rotation linear infinite reverse; animation-delay: -48092ms; animation-duration: 37987ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(1) .flip_rotate { transform: rotateX(77deg); } .rotate:nth-of-type(1) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(1) .flip { left: calc(30% + 68px); } .rotate:nth-of-type(2) { animation: rotation linear infinite reverse; animation-delay: -48272ms; animation-duration: 57049ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(2) .flip_rotate { transform: rotateX(62deg); } .rotate:nth-of-type(2) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(2) .flip { left: calc(30% + 119px); } .rotate:nth-of-type(3) { animation: rotation linear infinite reverse; animation-delay: -45402ms; animation-duration: 47898ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(3) .flip_rotate { transform: rotateX(4deg); } .rotate:nth-of-type(3) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(3) .flip { left: calc(30% + 111px); } .rotate:nth-of-type(4) { animation: rotation linear infinite reverse; animation-delay: -45888ms; animation-duration: 46820ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(4) .flip_rotate { transform: rotateX(4deg); } .rotate:nth-of-type(4) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(4) .flip { left: calc(30% + 118px); } .rotate:nth-of-type(5) { animation: rotation linear infinite reverse; animation-delay: -43187ms; animation-duration: 56957ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(5) .flip_rotate { transform: rotateX(13deg); } .rotate:nth-of-type(5) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(5) .flip { left: calc(30% + 122px); } .rotate:nth-of-type(6) { animation: rotation linear infinite reverse; animation-delay: -41986ms; animation-duration: 24878ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(6) .flip_rotate { transform: rotateX(75deg); } .rotate:nth-of-type(6) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(6) .flip { left: calc(30% + 59px); } .rotate:nth-of-type(7) { animation: rotation linear infinite reverse; animation-delay: -40409ms; animation-duration: 41007ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(7) .flip_rotate { transform: rotateX(36deg); } .rotate:nth-of-type(7) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(7) .flip { left: calc(30% + 67px); } .rotate:nth-of-type(8) { animation: rotation linear infinite reverse; animation-delay: -40058ms; animation-duration: 35558ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(8) .flip_rotate { transform: rotateX(65deg); } .rotate:nth-of-type(8) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(8) .flip { left: calc(30% + 77px); } .rotate:nth-of-type(9) { animation: rotation linear infinite reverse; animation-delay: -48443ms; animation-duration: 24327ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(9) .flip_rotate { transform: rotateX(15deg); } .rotate:nth-of-type(9) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(9) .flip { left: calc(30% + 107px); } .rotate:nth-of-type(10) { animation: rotation linear infinite reverse; animation-delay: -48320ms; animation-duration: 30275ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(10) .flip_rotate { transform: rotateX(55deg); } .rotate:nth-of-type(10) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(10) .flip { left: calc(30% + 80px); } .rotate:nth-of-type(11) { animation: rotation linear infinite reverse; animation-delay: -41102ms; animation-duration: 25264ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(11) .flip_rotate { transform: rotateX(85deg); } .rotate:nth-of-type(11) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(11) .flip { left: calc(30% + 54px); } .rotate:nth-of-type(12) { animation: rotation linear infinite reverse; animation-delay: -40610ms; animation-duration: 43945ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(12) .flip_rotate { transform: rotateX(14deg); } .rotate:nth-of-type(12) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(12) .flip { left: calc(30% + 112px); } .rotate:nth-of-type(13) { animation: rotation linear infinite reverse; animation-delay: -41970ms; animation-duration: 22836ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(13) .flip_rotate { transform: rotateX(58deg); } .rotate:nth-of-type(13) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(13) .flip { left: calc(30% + 76px); } .rotate:nth-of-type(14) { animation: rotation linear infinite reverse; animation-delay: -45785ms; animation-duration: 22596ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(14) .flip_rotate { transform: rotateX(34deg); } .rotate:nth-of-type(14) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(14) .flip { left: calc(30% + 55px); } .rotate:nth-of-type(15) { animation: rotation linear infinite reverse; animation-delay: -45560ms; animation-duration: 57366ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(15) .flip_rotate { transform: rotateX(50deg); } .rotate:nth-of-type(15) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(15) .flip { left: calc(30% + 87px); } .rotate:nth-of-type(16) { animation: rotation linear infinite reverse; animation-delay: -42871ms; animation-duration: 48217ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(16) .flip_rotate { transform: rotateX(53deg); } .rotate:nth-of-type(16) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(16) .flip { left: calc(30% + 98px); } .rotate:nth-of-type(17) { animation: rotation linear infinite reverse; animation-delay: -49654ms; animation-duration: 50192ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(17) .flip_rotate { transform: rotateX(34deg); } .rotate:nth-of-type(17) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(17) .flip { left: calc(30% + 77px); } .rotate:nth-of-type(18) { animation: rotation linear infinite reverse; animation-delay: -45801ms; animation-duration: 34233ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(18) .flip_rotate { transform: rotateX(77deg); } .rotate:nth-of-type(18) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(18) .flip { left: calc(30% + 70px); } .rotate:nth-of-type(19) { animation: rotation linear infinite reverse; animation-delay: -48451ms; animation-duration: 30722ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(19) .flip_rotate { transform: rotateX(53deg); } .rotate:nth-of-type(19) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(19) .flip { left: calc(30% + 104px); } .rotate:nth-of-type(20) { animation: rotation linear infinite reverse; animation-delay: -46932ms; animation-duration: 23746ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(20) .flip_rotate { transform: rotateX(44deg); } .rotate:nth-of-type(20) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(20) .flip { left: calc(30% + 52px); } .rotate:nth-of-type(21) { animation: rotation linear infinite reverse; animation-delay: -49884ms; animation-duration: 37786ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(21) .flip_rotate { transform: rotateX(76deg); } .rotate:nth-of-type(21) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(21) .flip { left: calc(30% + 99px); } .rotate:nth-of-type(22) { animation: rotation linear infinite reverse; animation-delay: -48408ms; animation-duration: 32778ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(22) .flip_rotate { transform: rotateX(7deg); } .rotate:nth-of-type(22) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(22) .flip { left: calc(30% + 99px); } .rotate:nth-of-type(23) { animation: rotation linear infinite reverse; animation-delay: -45273ms; animation-duration: 43957ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(23) .flip_rotate { transform: rotateX(49deg); } .rotate:nth-of-type(23) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(23) .flip { left: calc(30% + 125px); } .rotate:nth-of-type(24) { animation: rotation linear infinite reverse; animation-delay: -48627ms; animation-duration: 36281ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(24) .flip_rotate { transform: rotateX(38deg); } .rotate:nth-of-type(24) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(24) .flip { left: calc(30% + 122px); } .rotate:nth-of-type(25) { animation: rotation linear infinite reverse; animation-delay: -49731ms; animation-duration: 34727ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(25) .flip_rotate { transform: rotateX(22deg); } .rotate:nth-of-type(25) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(25) .flip { left: calc(30% + 95px); } .rotate:nth-of-type(26) { animation: rotation linear infinite reverse; animation-delay: -48654ms; animation-duration: 48050ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(26) .flip_rotate { transform: rotateX(25deg); } .rotate:nth-of-type(26) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(26) .flip { left: calc(30% + 70px); } .rotate:nth-of-type(27) { animation: rotation linear infinite reverse; animation-delay: -42954ms; animation-duration: 35867ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(27) .flip_rotate { transform: rotateX(53deg); } .rotate:nth-of-type(27) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(27) .flip { left: calc(30% + 74px); } .rotate:nth-of-type(28) { animation: rotation linear infinite reverse; animation-delay: -42490ms; animation-duration: 51017ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(28) .flip_rotate { transform: rotateX(71deg); } .rotate:nth-of-type(28) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(28) .flip { left: calc(30% + 119px); } .rotate:nth-of-type(29) { animation: rotation linear infinite reverse; animation-delay: -44587ms; animation-duration: 43417ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(29) .flip_rotate { transform: rotateX(47deg); } .rotate:nth-of-type(29) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(29) .flip { left: calc(30% + 112px); } .rotate:nth-of-type(30) { animation: rotation linear infinite reverse; animation-delay: -45001ms; animation-duration: 52805ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(30) .flip_rotate { transform: rotateX(88deg); } .rotate:nth-of-type(30) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(30) .flip { left: calc(30% + 75px); } .rotate:nth-of-type(31) { animation: rotation linear infinite reverse; animation-delay: -47221ms; animation-duration: 30211ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(31) .flip_rotate { transform: rotateX(21deg); } .rotate:nth-of-type(31) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(31) .flip { left: calc(30% + 63px); } .rotate:nth-of-type(32) { animation: rotation linear infinite reverse; animation-delay: -45716ms; animation-duration: 53437ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(32) .flip_rotate { transform: rotateX(38deg); } .rotate:nth-of-type(32) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(32) .flip { left: calc(30% + 109px); } .rotate:nth-of-type(33) { animation: rotation linear infinite reverse; animation-delay: -48789ms; animation-duration: 35461ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(33) .flip_rotate { transform: rotateX(75deg); } .rotate:nth-of-type(33) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(33) .flip { left: calc(30% + 107px); } .rotate:nth-of-type(34) { animation: rotation linear infinite reverse; animation-delay: -44449ms; animation-duration: 49880ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(34) .flip_rotate { transform: rotateX(51deg); } .rotate:nth-of-type(34) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(34) .flip { left: calc(30% + 69px); } .rotate:nth-of-type(35) { animation: rotation linear infinite reverse; animation-delay: -49108ms; animation-duration: 21114ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(35) .flip_rotate { transform: rotateX(65deg); } .rotate:nth-of-type(35) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(35) .flip { left: calc(30% + 106px); } .rotate:nth-of-type(36) { animation: rotation linear infinite reverse; animation-delay: -48886ms; animation-duration: 55740ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(36) .flip_rotate { transform: rotateX(84deg); } .rotate:nth-of-type(36) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(36) .flip { left: calc(30% + 122px); } .rotate:nth-of-type(37) { animation: rotation linear infinite reverse; animation-delay: -49902ms; animation-duration: 47575ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(37) .flip_rotate { transform: rotateX(31deg); } .rotate:nth-of-type(37) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(37) .flip { left: calc(30% + 129px); } .rotate:nth-of-type(38) { animation: rotation linear infinite reverse; animation-delay: -45935ms; animation-duration: 39647ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(38) .flip_rotate { transform: rotateX(38deg); } .rotate:nth-of-type(38) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(38) .flip { left: calc(30% + 103px); } .rotate:nth-of-type(39) { animation: rotation linear infinite reverse; animation-delay: -40833ms; animation-duration: 23340ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(39) .flip_rotate { transform: rotateX(31deg); } .rotate:nth-of-type(39) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(39) .flip { left: calc(30% + 130px); } .rotate:nth-of-type(40) { animation: rotation linear infinite reverse; animation-delay: -45673ms; animation-duration: 54289ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(40) .flip_rotate { transform: rotateX(70deg); } .rotate:nth-of-type(40) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(40) .flip { left: calc(30% + 85px); } .rotate:nth-of-type(41) { animation: rotation linear infinite reverse; animation-delay: -42603ms; animation-duration: 23368ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(41) .flip_rotate { transform: rotateX(81deg); } .rotate:nth-of-type(41) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(41) .flip { left: calc(30% + 62px); } .rotate:nth-of-type(42) { animation: rotation linear infinite reverse; animation-delay: -40823ms; animation-duration: 31743ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(42) .flip_rotate { transform: rotateX(37deg); } .rotate:nth-of-type(42) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(42) .flip { left: calc(30% + 130px); } .rotate:nth-of-type(43) { animation: rotation linear infinite reverse; animation-delay: -43866ms; animation-duration: 53436ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(43) .flip_rotate { transform: rotateX(33deg); } .rotate:nth-of-type(43) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(43) .flip { left: calc(30% + 116px); } .rotate:nth-of-type(44) { animation: rotation linear infinite reverse; animation-delay: -43026ms; animation-duration: 53169ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(44) .flip_rotate { transform: rotateX(86deg); } .rotate:nth-of-type(44) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(44) .flip { left: calc(30% + 124px); } .rotate:nth-of-type(45) { animation: rotation linear infinite reverse; animation-delay: -49072ms; animation-duration: 33614ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(45) .flip_rotate { transform: rotateX(54deg); } .rotate:nth-of-type(45) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(45) .flip { left: calc(30% + 87px); } .rotate:nth-of-type(46) { animation: rotation linear infinite reverse; animation-delay: -49939ms; animation-duration: 21400ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(46) .flip_rotate { transform: rotateX(47deg); } .rotate:nth-of-type(46) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(46) .flip { left: calc(30% + 76px); } .rotate:nth-of-type(47) { animation: rotation linear infinite reverse; animation-delay: -47188ms; animation-duration: 25797ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(47) .flip_rotate { transform: rotateX(31deg); } .rotate:nth-of-type(47) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(47) .flip { left: calc(30% + 112px); } .rotate:nth-of-type(48) { animation: rotation linear infinite reverse; animation-delay: -49445ms; animation-duration: 23878ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(48) .flip_rotate { transform: rotateX(7deg); } .rotate:nth-of-type(48) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(48) .flip { left: calc(30% + 67px); } .rotate:nth-of-type(49) { animation: rotation linear infinite reverse; animation-delay: -45149ms; animation-duration: 44238ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(49) .flip_rotate { transform: rotateX(81deg); } .rotate:nth-of-type(49) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(49) .flip { left: calc(30% + 53px); } .rotate:nth-of-type(50) { animation: rotation linear infinite reverse; animation-delay: -48310ms; animation-duration: 32754ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(50) .flip_rotate { transform: rotateX(54deg); } .rotate:nth-of-type(50) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(50) .flip { left: calc(30% + 81px); } .rotate:nth-of-type(51) { animation: rotation linear infinite reverse; animation-delay: -48502ms; animation-duration: 44853ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(51) .flip_rotate { transform: rotateX(40deg); } .rotate:nth-of-type(51) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(51) .flip { left: calc(30% + 89px); } .rotate:nth-of-type(52) { animation: rotation linear infinite reverse; animation-delay: -43302ms; animation-duration: 54104ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(52) .flip_rotate { transform: rotateX(59deg); } .rotate:nth-of-type(52) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(52) .flip { left: calc(30% + 61px); } .rotate:nth-of-type(53) { animation: rotation linear infinite reverse; animation-delay: -40312ms; animation-duration: 46590ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(53) .flip_rotate { transform: rotateX(62deg); } .rotate:nth-of-type(53) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(53) .flip { left: calc(30% + 117px); } .rotate:nth-of-type(54) { animation: rotation linear infinite reverse; animation-delay: -43313ms; animation-duration: 58353ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(54) .flip_rotate { transform: rotateX(33deg); } .rotate:nth-of-type(54) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(54) .flip { left: calc(30% + 101px); } .rotate:nth-of-type(55) { animation: rotation linear infinite reverse; animation-delay: -46304ms; animation-duration: 47003ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(55) .flip_rotate { transform: rotateX(40deg); } .rotate:nth-of-type(55) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(55) .flip { left: calc(30% + 79px); } .rotate:nth-of-type(56) { animation: rotation linear infinite reverse; animation-delay: -44589ms; animation-duration: 43954ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(56) .flip_rotate { transform: rotateX(3deg); } .rotate:nth-of-type(56) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(56) .flip { left: calc(30% + 73px); } .rotate:nth-of-type(57) { animation: rotation linear infinite reverse; animation-delay: -45377ms; animation-duration: 58400ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(57) .flip_rotate { transform: rotateX(12deg); } .rotate:nth-of-type(57) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(57) .flip { left: calc(30% + 115px); } .rotate:nth-of-type(58) { animation: rotation linear infinite reverse; animation-delay: -45559ms; animation-duration: 59412ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(58) .flip_rotate { transform: rotateX(21deg); } .rotate:nth-of-type(58) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(58) .flip { left: calc(30% + 130px); } .rotate:nth-of-type(59) { animation: rotation linear infinite reverse; animation-delay: -46849ms; animation-duration: 34044ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(59) .flip_rotate { transform: rotateX(36deg); } .rotate:nth-of-type(59) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(59) .flip { left: calc(30% + 57px); } .rotate:nth-of-type(60) { animation: rotation linear infinite reverse; animation-delay: -47362ms; animation-duration: 37091ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(60) .flip_rotate { transform: rotateX(17deg); } .rotate:nth-of-type(60) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(60) .flip { left: calc(30% + 111px); } .rotate:nth-of-type(61) { animation: rotation linear infinite reverse; animation-delay: -43158ms; animation-duration: 58591ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(61) .flip_rotate { transform: rotateX(19deg); } .rotate:nth-of-type(61) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(61) .flip { left: calc(30% + 112px); } .rotate:nth-of-type(62) { animation: rotation linear infinite reverse; animation-delay: -41800ms; animation-duration: 31738ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(62) .flip_rotate { transform: rotateX(4deg); } .rotate:nth-of-type(62) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(62) .flip { left: calc(30% + 58px); } .rotate:nth-of-type(63) { animation: rotation linear infinite reverse; animation-delay: -44588ms; animation-duration: 50634ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(63) .flip_rotate { transform: rotateX(3deg); } .rotate:nth-of-type(63) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(63) .flip { left: calc(30% + 93px); } .rotate:nth-of-type(64) { animation: rotation linear infinite reverse; animation-delay: -45990ms; animation-duration: 33517ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(64) .flip_rotate { transform: rotateX(60deg); } .rotate:nth-of-type(64) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(64) .flip { left: calc(30% + 117px); } .rotate:nth-of-type(65) { animation: rotation linear infinite reverse; animation-delay: -44142ms; animation-duration: 37422ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(65) .flip_rotate { transform: rotateX(34deg); } .rotate:nth-of-type(65) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(65) .flip { left: calc(30% + 64px); } .rotate:nth-of-type(66) { animation: rotation linear infinite reverse; animation-delay: -47601ms; animation-duration: 21387ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(66) .flip_rotate { transform: rotateX(89deg); } .rotate:nth-of-type(66) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(66) .flip { left: calc(30% + 111px); } .rotate:nth-of-type(67) { animation: rotation linear infinite reverse; animation-delay: -40179ms; animation-duration: 53143ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(67) .flip_rotate { transform: rotateX(14deg); } .rotate:nth-of-type(67) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(67) .flip { left: calc(30% + 106px); } .rotate:nth-of-type(68) { animation: rotation linear infinite reverse; animation-delay: -44627ms; animation-duration: 58528ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(68) .flip_rotate { transform: rotateX(43deg); } .rotate:nth-of-type(68) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(68) .flip { left: calc(30% + 110px); } .rotate:nth-of-type(69) { animation: rotation linear infinite reverse; animation-delay: -44766ms; animation-duration: 28043ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(69) .flip_rotate { transform: rotateX(70deg); } .rotate:nth-of-type(69) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(69) .flip { left: calc(30% + 83px); } .rotate:nth-of-type(70) { animation: rotation linear infinite reverse; animation-delay: -42261ms; animation-duration: 59628ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(70) .flip_rotate { transform: rotateX(16deg); } .rotate:nth-of-type(70) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(70) .flip { left: calc(30% + 78px); } .rotate:nth-of-type(71) { animation: rotation linear infinite reverse; animation-delay: -41668ms; animation-duration: 51883ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(71) .flip_rotate { transform: rotateX(11deg); } .rotate:nth-of-type(71) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(71) .flip { left: calc(30% + 59px); } .rotate:nth-of-type(72) { animation: rotation linear infinite reverse; animation-delay: -48803ms; animation-duration: 42354ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(72) .flip_rotate { transform: rotateX(18deg); } .rotate:nth-of-type(72) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(72) .flip { left: calc(30% + 71px); } .rotate:nth-of-type(73) { animation: rotation linear infinite reverse; animation-delay: -48643ms; animation-duration: 33200ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(73) .flip_rotate { transform: rotateX(70deg); } .rotate:nth-of-type(73) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(73) .flip { left: calc(30% + 96px); } .rotate:nth-of-type(74) { animation: rotation linear infinite reverse; animation-delay: -41898ms; animation-duration: 57972ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(74) .flip_rotate { transform: rotateX(27deg); } .rotate:nth-of-type(74) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(74) .flip { left: calc(30% + 127px); } .rotate:nth-of-type(75) { animation: rotation linear infinite reverse; animation-delay: -40737ms; animation-duration: 28984ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(75) .flip_rotate { transform: rotateX(6deg); } .rotate:nth-of-type(75) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(75) .flip { left: calc(30% + 114px); } .rotate:nth-of-type(76) { animation: rotation linear infinite reverse; animation-delay: -46793ms; animation-duration: 29786ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(76) .flip_rotate { transform: rotateX(75deg); } .rotate:nth-of-type(76) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(76) .flip { left: calc(30% + 91px); } .rotate:nth-of-type(77) { animation: rotation linear infinite reverse; animation-delay: -44097ms; animation-duration: 30513ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(77) .flip_rotate { transform: rotateX(70deg); } .rotate:nth-of-type(77) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(77) .flip { left: calc(30% + 78px); } .rotate:nth-of-type(78) { animation: rotation linear infinite reverse; animation-delay: -42594ms; animation-duration: 48192ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(78) .flip_rotate { transform: rotateX(82deg); } .rotate:nth-of-type(78) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(78) .flip { left: calc(30% + 112px); } .rotate:nth-of-type(79) { animation: rotation linear infinite reverse; animation-delay: -43658ms; animation-duration: 39717ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(79) .flip_rotate { transform: rotateX(72deg); } .rotate:nth-of-type(79) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(79) .flip { left: calc(30% + 74px); } .rotate:nth-of-type(80) { animation: rotation linear infinite reverse; animation-delay: -41644ms; animation-duration: 52771ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(80) .flip_rotate { transform: rotateX(1deg); } .rotate:nth-of-type(80) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(80) .flip { left: calc(30% + 60px); } .rotate:nth-of-type(81) { animation: rotation linear infinite reverse; animation-delay: -45975ms; animation-duration: 50718ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(81) .flip_rotate { transform: rotateX(68deg); } .rotate:nth-of-type(81) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(81) .flip { left: calc(30% + 125px); } .rotate:nth-of-type(82) { animation: rotation linear infinite reverse; animation-delay: -47843ms; animation-duration: 37659ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(82) .flip_rotate { transform: rotateX(27deg); } .rotate:nth-of-type(82) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(82) .flip { left: calc(30% + 80px); } .rotate:nth-of-type(83) { animation: rotation linear infinite reverse; animation-delay: -43788ms; animation-duration: 59501ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(83) .flip_rotate { transform: rotateX(37deg); } .rotate:nth-of-type(83) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(83) .flip { left: calc(30% + 93px); } .rotate:nth-of-type(84) { animation: rotation linear infinite reverse; animation-delay: -40868ms; animation-duration: 26181ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(84) .flip_rotate { transform: rotateX(62deg); } .rotate:nth-of-type(84) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(84) .flip { left: calc(30% + 93px); } .rotate:nth-of-type(85) { animation: rotation linear infinite reverse; animation-delay: -44456ms; animation-duration: 28200ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(85) .flip_rotate { transform: rotateX(68deg); } .rotate:nth-of-type(85) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(85) .flip { left: calc(30% + 95px); } .rotate:nth-of-type(86) { animation: rotation linear infinite reverse; animation-delay: -49900ms; animation-duration: 26752ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(86) .flip_rotate { transform: rotateX(38deg); } .rotate:nth-of-type(86) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(86) .flip { left: calc(30% + 75px); } .rotate:nth-of-type(87) { animation: rotation linear infinite reverse; animation-delay: -42496ms; animation-duration: 48662ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(87) .flip_rotate { transform: rotateX(9deg); } .rotate:nth-of-type(87) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(87) .flip { left: calc(30% + 61px); } .rotate:nth-of-type(88) { animation: rotation linear infinite reverse; animation-delay: -44634ms; animation-duration: 38784ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(88) .flip_rotate { transform: rotateX(77deg); } .rotate:nth-of-type(88) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(88) .flip { left: calc(30% + 122px); } .rotate:nth-of-type(89) { animation: rotation linear infinite reverse; animation-delay: -42403ms; animation-duration: 27394ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(89) .flip_rotate { transform: rotateX(72deg); } .rotate:nth-of-type(89) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(89) .flip { left: calc(30% + 99px); } .rotate:nth-of-type(90) { animation: rotation linear infinite reverse; animation-delay: -41316ms; animation-duration: 25378ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(90) .flip_rotate { transform: rotateX(78deg); } .rotate:nth-of-type(90) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(90) .flip { left: calc(30% + 63px); } .rotate:nth-of-type(91) { animation: rotation linear infinite reverse; animation-delay: -45204ms; animation-duration: 20630ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(91) .flip_rotate { transform: rotateX(26deg); } .rotate:nth-of-type(91) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(91) .flip { left: calc(30% + 85px); } .rotate:nth-of-type(92) { animation: rotation linear infinite reverse; animation-delay: -47282ms; animation-duration: 57676ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(92) .flip_rotate { transform: rotateX(16deg); } .rotate:nth-of-type(92) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(92) .flip { left: calc(30% + 53px); } .rotate:nth-of-type(93) { animation: rotation linear infinite reverse; animation-delay: -40033ms; animation-duration: 55214ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(93) .flip_rotate { transform: rotateX(51deg); } .rotate:nth-of-type(93) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(93) .flip { left: calc(30% + 56px); } .rotate:nth-of-type(94) { animation: rotation linear infinite reverse; animation-delay: -47331ms; animation-duration: 32927ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(94) .flip_rotate { transform: rotateX(1deg); } .rotate:nth-of-type(94) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(94) .flip { left: calc(30% + 121px); } .rotate:nth-of-type(95) { animation: rotation linear infinite reverse; animation-delay: -42953ms; animation-duration: 20393ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(95) .flip_rotate { transform: rotateX(81deg); } .rotate:nth-of-type(95) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(95) .flip { left: calc(30% + 87px); } .rotate:nth-of-type(96) { animation: rotation linear infinite reverse; animation-delay: -47346ms; animation-duration: 38669ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(96) .flip_rotate { transform: rotateX(3deg); } .rotate:nth-of-type(96) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(96) .flip { left: calc(30% + 66px); } .rotate:nth-of-type(97) { animation: rotation linear infinite reverse; animation-delay: -48532ms; animation-duration: 57613ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(97) .flip_rotate { transform: rotateX(38deg); } .rotate:nth-of-type(97) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(97) .flip { left: calc(30% + 51px); } .rotate:nth-of-type(98) { animation: rotation linear infinite reverse; animation-delay: -44117ms; animation-duration: 59773ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(98) .flip_rotate { transform: rotateX(31deg); } .rotate:nth-of-type(98) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(98) .flip { left: calc(30% + 121px); } .rotate:nth-of-type(99) { animation: rotation linear infinite reverse; animation-delay: -47261ms; animation-duration: 54641ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(99) .flip_rotate { transform: rotateX(16deg); } .rotate:nth-of-type(99) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(99) .flip { left: calc(30% + 109px); } .rotate:nth-of-type(100) { animation: rotation linear infinite reverse; animation-delay: -48109ms; animation-duration: 40033ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(100) .flip_rotate { transform: rotateX(56deg); } .rotate:nth-of-type(100) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(100) .flip { left: calc(30% + 56px); } .rotate:nth-of-type(101) { animation: rotation linear infinite reverse; animation-delay: -43532ms; animation-duration: 48758ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(101) .flip_rotate { transform: rotateX(24deg); } .rotate:nth-of-type(101) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(101) .flip { left: calc(30% + 123px); } .rotate:nth-of-type(102) { animation: rotation linear infinite reverse; animation-delay: -47959ms; animation-duration: 58308ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(102) .flip_rotate { transform: rotateX(26deg); } .rotate:nth-of-type(102) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(102) .flip { left: calc(30% + 66px); } .rotate:nth-of-type(103) { animation: rotation linear infinite reverse; animation-delay: -43874ms; animation-duration: 54754ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(103) .flip_rotate { transform: rotateX(25deg); } .rotate:nth-of-type(103) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(103) .flip { left: calc(30% + 116px); } .rotate:nth-of-type(104) { animation: rotation linear infinite reverse; animation-delay: -48200ms; animation-duration: 57902ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(104) .flip_rotate { transform: rotateX(67deg); } .rotate:nth-of-type(104) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(104) .flip { left: calc(30% + 67px); } .rotate:nth-of-type(105) { animation: rotation linear infinite reverse; animation-delay: -42152ms; animation-duration: 46980ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(105) .flip_rotate { transform: rotateX(53deg); } .rotate:nth-of-type(105) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(105) .flip { left: calc(30% + 51px); } .rotate:nth-of-type(106) { animation: rotation linear infinite reverse; animation-delay: -46736ms; animation-duration: 31095ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(106) .flip_rotate { transform: rotateX(9deg); } .rotate:nth-of-type(106) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(106) .flip { left: calc(30% + 79px); } .rotate:nth-of-type(107) { animation: rotation linear infinite reverse; animation-delay: -48344ms; animation-duration: 36113ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(107) .flip_rotate { transform: rotateX(69deg); } .rotate:nth-of-type(107) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(107) .flip { left: calc(30% + 90px); } .rotate:nth-of-type(108) { animation: rotation linear infinite reverse; animation-delay: -48128ms; animation-duration: 47240ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(108) .flip_rotate { transform: rotateX(41deg); } .rotate:nth-of-type(108) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(108) .flip { left: calc(30% + 99px); } .rotate:nth-of-type(109) { animation: rotation linear infinite reverse; animation-delay: -48546ms; animation-duration: 20414ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(109) .flip_rotate { transform: rotateX(50deg); } .rotate:nth-of-type(109) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(109) .flip { left: calc(30% + 71px); } .rotate:nth-of-type(110) { animation: rotation linear infinite reverse; animation-delay: -41053ms; animation-duration: 35686ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(110) .flip_rotate { transform: rotateX(15deg); } .rotate:nth-of-type(110) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(110) .flip { left: calc(30% + 79px); } .rotate:nth-of-type(111) { animation: rotation linear infinite reverse; animation-delay: -42165ms; animation-duration: 49409ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(111) .flip_rotate { transform: rotateX(79deg); } .rotate:nth-of-type(111) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(111) .flip { left: calc(30% + 115px); } .rotate:nth-of-type(112) { animation: rotation linear infinite reverse; animation-delay: -47262ms; animation-duration: 36048ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(112) .flip_rotate { transform: rotateX(60deg); } .rotate:nth-of-type(112) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(112) .flip { left: calc(30% + 126px); } .rotate:nth-of-type(113) { animation: rotation linear infinite reverse; animation-delay: -41041ms; animation-duration: 25844ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(113) .flip_rotate { transform: rotateX(26deg); } .rotate:nth-of-type(113) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(113) .flip { left: calc(30% + 94px); } .rotate:nth-of-type(114) { animation: rotation linear infinite reverse; animation-delay: -48582ms; animation-duration: 49678ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(114) .flip_rotate { transform: rotateX(31deg); } .rotate:nth-of-type(114) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(114) .flip { left: calc(30% + 71px); } .rotate:nth-of-type(115) { animation: rotation linear infinite reverse; animation-delay: -48404ms; animation-duration: 59140ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(115) .flip_rotate { transform: rotateX(33deg); } .rotate:nth-of-type(115) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(115) .flip { left: calc(30% + 116px); } .rotate:nth-of-type(116) { animation: rotation linear infinite reverse; animation-delay: -41790ms; animation-duration: 34902ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(116) .flip_rotate { transform: rotateX(9deg); } .rotate:nth-of-type(116) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(116) .flip { left: calc(30% + 128px); } .rotate:nth-of-type(117) { animation: rotation linear infinite reverse; animation-delay: -44903ms; animation-duration: 29976ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(117) .flip_rotate { transform: rotateX(9deg); } .rotate:nth-of-type(117) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(117) .flip { left: calc(30% + 118px); } .rotate:nth-of-type(118) { animation: rotation linear infinite reverse; animation-delay: -41025ms; animation-duration: 38546ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(118) .flip_rotate { transform: rotateX(53deg); } .rotate:nth-of-type(118) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(118) .flip { left: calc(30% + 59px); } .rotate:nth-of-type(119) { animation: rotation linear infinite reverse; animation-delay: -42761ms; animation-duration: 39609ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(119) .flip_rotate { transform: rotateX(10deg); } .rotate:nth-of-type(119) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(119) .flip { left: calc(30% + 59px); } .rotate:nth-of-type(120) { animation: rotation linear infinite reverse; animation-delay: -46813ms; animation-duration: 55284ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(120) .flip_rotate { transform: rotateX(72deg); } .rotate:nth-of-type(120) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(120) .flip { left: calc(30% + 54px); } .rotate:nth-of-type(121) { animation: rotation linear infinite reverse; animation-delay: -46853ms; animation-duration: 33051ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(121) .flip_rotate { transform: rotateX(3deg); } .rotate:nth-of-type(121) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(121) .flip { left: calc(30% + 64px); } .rotate:nth-of-type(122) { animation: rotation linear infinite reverse; animation-delay: -46851ms; animation-duration: 23032ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(122) .flip_rotate { transform: rotateX(35deg); } .rotate:nth-of-type(122) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(122) .flip { left: calc(30% + 119px); } .rotate:nth-of-type(123) { animation: rotation linear infinite reverse; animation-delay: -48882ms; animation-duration: 34769ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(123) .flip_rotate { transform: rotateX(79deg); } .rotate:nth-of-type(123) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(123) .flip { left: calc(30% + 53px); } .rotate:nth-of-type(124) { animation: rotation linear infinite reverse; animation-delay: -43176ms; animation-duration: 32857ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(124) .flip_rotate { transform: rotateX(28deg); } .rotate:nth-of-type(124) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(124) .flip { left: calc(30% + 130px); } .rotate:nth-of-type(125) { animation: rotation linear infinite reverse; animation-delay: -48595ms; animation-duration: 30272ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(125) .flip_rotate { transform: rotateX(81deg); } .rotate:nth-of-type(125) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(125) .flip { left: calc(30% + 128px); } .rotate:nth-of-type(126) { animation: rotation linear infinite reverse; animation-delay: -41373ms; animation-duration: 52186ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(126) .flip_rotate { transform: rotateX(67deg); } .rotate:nth-of-type(126) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(126) .flip { left: calc(30% + 120px); } .rotate:nth-of-type(127) { animation: rotation linear infinite reverse; animation-delay: -48577ms; animation-duration: 35006ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(127) .flip_rotate { transform: rotateX(17deg); } .rotate:nth-of-type(127) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(127) .flip { left: calc(30% + 61px); } .rotate:nth-of-type(128) { animation: rotation linear infinite reverse; animation-delay: -45509ms; animation-duration: 58169ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(128) .flip_rotate { transform: rotateX(36deg); } .rotate:nth-of-type(128) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(128) .flip { left: calc(30% + 121px); } .rotate:nth-of-type(129) { animation: rotation linear infinite reverse; animation-delay: -42849ms; animation-duration: 29609ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(129) .flip_rotate { transform: rotateX(18deg); } .rotate:nth-of-type(129) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(129) .flip { left: calc(30% + 122px); } .rotate:nth-of-type(130) { animation: rotation linear infinite reverse; animation-delay: -46077ms; animation-duration: 39916ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(130) .flip_rotate { transform: rotateX(4deg); } .rotate:nth-of-type(130) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(130) .flip { left: calc(30% + 125px); } .rotate:nth-of-type(131) { animation: rotation linear infinite reverse; animation-delay: -47814ms; animation-duration: 45636ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(131) .flip_rotate { transform: rotateX(14deg); } .rotate:nth-of-type(131) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(131) .flip { left: calc(30% + 105px); } .rotate:nth-of-type(132) { animation: rotation linear infinite reverse; animation-delay: -45321ms; animation-duration: 39469ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(132) .flip_rotate { transform: rotateX(6deg); } .rotate:nth-of-type(132) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(132) .flip { left: calc(30% + 113px); } .rotate:nth-of-type(133) { animation: rotation linear infinite reverse; animation-delay: -42826ms; animation-duration: 41295ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(133) .flip_rotate { transform: rotateX(2deg); } .rotate:nth-of-type(133) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(133) .flip { left: calc(30% + 116px); } .rotate:nth-of-type(134) { animation: rotation linear infinite reverse; animation-delay: -40701ms; animation-duration: 35302ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(134) .flip_rotate { transform: rotateX(25deg); } .rotate:nth-of-type(134) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(134) .flip { left: calc(30% + 126px); } .rotate:nth-of-type(135) { animation: rotation linear infinite reverse; animation-delay: -44798ms; animation-duration: 42932ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(135) .flip_rotate { transform: rotateX(55deg); } .rotate:nth-of-type(135) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(135) .flip { left: calc(30% + 76px); } .rotate:nth-of-type(136) { animation: rotation linear infinite reverse; animation-delay: -43177ms; animation-duration: 35888ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(136) .flip_rotate { transform: rotateX(45deg); } .rotate:nth-of-type(136) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(136) .flip { left: calc(30% + 119px); } .rotate:nth-of-type(137) { animation: rotation linear infinite reverse; animation-delay: -48321ms; animation-duration: 31454ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(137) .flip_rotate { transform: rotateX(48deg); } .rotate:nth-of-type(137) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(137) .flip { left: calc(30% + 57px); } .rotate:nth-of-type(138) { animation: rotation linear infinite reverse; animation-delay: -47374ms; animation-duration: 26930ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(138) .flip_rotate { transform: rotateX(67deg); } .rotate:nth-of-type(138) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(138) .flip { left: calc(30% + 125px); } .rotate:nth-of-type(139) { animation: rotation linear infinite reverse; animation-delay: -42839ms; animation-duration: 30128ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(139) .flip_rotate { transform: rotateX(17deg); } .rotate:nth-of-type(139) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(139) .flip { left: calc(30% + 76px); } .rotate:nth-of-type(140) { animation: rotation linear infinite reverse; animation-delay: -49115ms; animation-duration: 39316ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(140) .flip_rotate { transform: rotateX(76deg); } .rotate:nth-of-type(140) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(140) .flip { left: calc(30% + 61px); } .rotate:nth-of-type(141) { animation: rotation linear infinite reverse; animation-delay: -49672ms; animation-duration: 22084ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(141) .flip_rotate { transform: rotateX(60deg); } .rotate:nth-of-type(141) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(141) .flip { left: calc(30% + 73px); } .rotate:nth-of-type(142) { animation: rotation linear infinite reverse; animation-delay: -45672ms; animation-duration: 36426ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(142) .flip_rotate { transform: rotateX(67deg); } .rotate:nth-of-type(142) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(142) .flip { left: calc(30% + 68px); } .rotate:nth-of-type(143) { animation: rotation linear infinite reverse; animation-delay: -48611ms; animation-duration: 39312ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(143) .flip_rotate { transform: rotateX(8deg); } .rotate:nth-of-type(143) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(143) .flip { left: calc(30% + 114px); } .rotate:nth-of-type(144) { animation: rotation linear infinite reverse; animation-delay: -45007ms; animation-duration: 31309ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(144) .flip_rotate { transform: rotateX(69deg); } .rotate:nth-of-type(144) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(144) .flip { left: calc(30% + 98px); } .rotate:nth-of-type(145) { animation: rotation linear infinite reverse; animation-delay: -49774ms; animation-duration: 22329ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(145) .flip_rotate { transform: rotateX(59deg); } .rotate:nth-of-type(145) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(145) .flip { left: calc(30% + 106px); } .rotate:nth-of-type(146) { animation: rotation linear infinite reverse; animation-delay: -45336ms; animation-duration: 26015ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(146) .flip_rotate { transform: rotateX(17deg); } .rotate:nth-of-type(146) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(146) .flip { left: calc(30% + 98px); } .rotate:nth-of-type(147) { animation: rotation linear infinite reverse; animation-delay: -43631ms; animation-duration: 37853ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(147) .flip_rotate { transform: rotateX(46deg); } .rotate:nth-of-type(147) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(147) .flip { left: calc(30% + 124px); } .rotate:nth-of-type(148) { animation: rotation linear infinite reverse; animation-delay: -48097ms; animation-duration: 52255ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(148) .flip_rotate { transform: rotateX(79deg); } .rotate:nth-of-type(148) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(148) .flip { left: calc(30% + 117px); } .rotate:nth-of-type(149) { animation: rotation linear infinite reverse; animation-delay: -41727ms; animation-duration: 44740ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(149) .flip_rotate { transform: rotateX(3deg); } .rotate:nth-of-type(149) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(149) .flip { left: calc(30% + 52px); } .rotate:nth-of-type(150) { animation: rotation linear infinite reverse; animation-delay: -47804ms; animation-duration: 39902ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(150) .flip_rotate { transform: rotateX(10deg); } .rotate:nth-of-type(150) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(150) .flip { left: calc(30% + 57px); } .rotate:nth-of-type(151) { animation: rotation linear infinite reverse; animation-delay: -49594ms; animation-duration: 54659ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(151) .flip_rotate { transform: rotateX(50deg); } .rotate:nth-of-type(151) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(151) .flip { left: calc(30% + 127px); } .rotate:nth-of-type(152) { animation: rotation linear infinite reverse; animation-delay: -46720ms; animation-duration: 55075ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(152) .flip_rotate { transform: rotateX(50deg); } .rotate:nth-of-type(152) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(152) .flip { left: calc(30% + 80px); } .rotate:nth-of-type(153) { animation: rotation linear infinite reverse; animation-delay: -43713ms; animation-duration: 45275ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(153) .flip_rotate { transform: rotateX(35deg); } .rotate:nth-of-type(153) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(153) .flip { left: calc(30% + 77px); } .rotate:nth-of-type(154) { animation: rotation linear infinite reverse; animation-delay: -44304ms; animation-duration: 20224ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(154) .flip_rotate { transform: rotateX(35deg); } .rotate:nth-of-type(154) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(154) .flip { left: calc(30% + 68px); } .rotate:nth-of-type(155) { animation: rotation linear infinite reverse; animation-delay: -40924ms; animation-duration: 52208ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(155) .flip_rotate { transform: rotateX(4deg); } .rotate:nth-of-type(155) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(155) .flip { left: calc(30% + 51px); } .rotate:nth-of-type(156) { animation: rotation linear infinite reverse; animation-delay: -43255ms; animation-duration: 31890ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(156) .flip_rotate { transform: rotateX(88deg); } .rotate:nth-of-type(156) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(156) .flip { left: calc(30% + 78px); } .rotate:nth-of-type(157) { animation: rotation linear infinite reverse; animation-delay: -41727ms; animation-duration: 43475ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(157) .flip_rotate { transform: rotateX(20deg); } .rotate:nth-of-type(157) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(157) .flip { left: calc(30% + 100px); } .rotate:nth-of-type(158) { animation: rotation linear infinite reverse; animation-delay: -42623ms; animation-duration: 44304ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(158) .flip_rotate { transform: rotateX(34deg); } .rotate:nth-of-type(158) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(158) .flip { left: calc(30% + 51px); } .rotate:nth-of-type(159) { animation: rotation linear infinite reverse; animation-delay: -49859ms; animation-duration: 38253ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(159) .flip_rotate { transform: rotateX(37deg); } .rotate:nth-of-type(159) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(159) .flip { left: calc(30% + 82px); } .rotate:nth-of-type(160) { animation: rotation linear infinite reverse; animation-delay: -45529ms; animation-duration: 46536ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(160) .flip_rotate { transform: rotateX(38deg); } .rotate:nth-of-type(160) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(160) .flip { left: calc(30% + 87px); } .rotate:nth-of-type(161) { animation: rotation linear infinite reverse; animation-delay: -48332ms; animation-duration: 37349ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(161) .flip_rotate { transform: rotateX(6deg); } .rotate:nth-of-type(161) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(161) .flip { left: calc(30% + 86px); } .rotate:nth-of-type(162) { animation: rotation linear infinite reverse; animation-delay: -40256ms; animation-duration: 51173ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(162) .flip_rotate { transform: rotateX(72deg); } .rotate:nth-of-type(162) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(162) .flip { left: calc(30% + 66px); } .rotate:nth-of-type(163) { animation: rotation linear infinite reverse; animation-delay: -48531ms; animation-duration: 50512ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(163) .flip_rotate { transform: rotateX(16deg); } .rotate:nth-of-type(163) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(163) .flip { left: calc(30% + 98px); } .rotate:nth-of-type(164) { animation: rotation linear infinite reverse; animation-delay: -42173ms; animation-duration: 35102ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(164) .flip_rotate { transform: rotateX(61deg); } .rotate:nth-of-type(164) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(164) .flip { left: calc(30% + 54px); } .rotate:nth-of-type(165) { animation: rotation linear infinite reverse; animation-delay: -47409ms; animation-duration: 22927ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(165) .flip_rotate { transform: rotateX(54deg); } .rotate:nth-of-type(165) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(165) .flip { left: calc(30% + 117px); } .rotate:nth-of-type(166) { animation: rotation linear infinite reverse; animation-delay: -43935ms; animation-duration: 20089ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(166) .flip_rotate { transform: rotateX(23deg); } .rotate:nth-of-type(166) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(166) .flip { left: calc(30% + 86px); } .rotate:nth-of-type(167) { animation: rotation linear infinite reverse; animation-delay: -41953ms; animation-duration: 47897ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(167) .flip_rotate { transform: rotateX(80deg); } .rotate:nth-of-type(167) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(167) .flip { left: calc(30% + 116px); } .rotate:nth-of-type(168) { animation: rotation linear infinite reverse; animation-delay: -44279ms; animation-duration: 25859ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(168) .flip_rotate { transform: rotateX(24deg); } .rotate:nth-of-type(168) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(168) .flip { left: calc(30% + 65px); } .rotate:nth-of-type(169) { animation: rotation linear infinite reverse; animation-delay: -49409ms; animation-duration: 20771ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(169) .flip_rotate { transform: rotateX(60deg); } .rotate:nth-of-type(169) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(169) .flip { left: calc(30% + 62px); } .rotate:nth-of-type(170) { animation: rotation linear infinite reverse; animation-delay: -44572ms; animation-duration: 40446ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(170) .flip_rotate { transform: rotateX(15deg); } .rotate:nth-of-type(170) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(170) .flip { left: calc(30% + 57px); } .rotate:nth-of-type(171) { animation: rotation linear infinite reverse; animation-delay: -43707ms; animation-duration: 31933ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(171) .flip_rotate { transform: rotateX(46deg); } .rotate:nth-of-type(171) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(171) .flip { left: calc(30% + 86px); } .rotate:nth-of-type(172) { animation: rotation linear infinite reverse; animation-delay: -40039ms; animation-duration: 21353ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(172) .flip_rotate { transform: rotateX(47deg); } .rotate:nth-of-type(172) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(172) .flip { left: calc(30% + 128px); } .rotate:nth-of-type(173) { animation: rotation linear infinite reverse; animation-delay: -47379ms; animation-duration: 43646ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(173) .flip_rotate { transform: rotateX(31deg); } .rotate:nth-of-type(173) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(173) .flip { left: calc(30% + 95px); } .rotate:nth-of-type(174) { animation: rotation linear infinite reverse; animation-delay: -42686ms; animation-duration: 34644ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(174) .flip_rotate { transform: rotateX(29deg); } .rotate:nth-of-type(174) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(174) .flip { left: calc(30% + 114px); } .rotate:nth-of-type(175) { animation: rotation linear infinite reverse; animation-delay: -48013ms; animation-duration: 48865ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(175) .flip_rotate { transform: rotateX(68deg); } .rotate:nth-of-type(175) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(175) .flip { left: calc(30% + 60px); } .rotate:nth-of-type(176) { animation: rotation linear infinite reverse; animation-delay: -42410ms; animation-duration: 51071ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(176) .flip_rotate { transform: rotateX(31deg); } .rotate:nth-of-type(176) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(176) .flip { left: calc(30% + 124px); } .rotate:nth-of-type(177) { animation: rotation linear infinite reverse; animation-delay: -43324ms; animation-duration: 31007ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(177) .flip_rotate { transform: rotateX(48deg); } .rotate:nth-of-type(177) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(177) .flip { left: calc(30% + 86px); } .rotate:nth-of-type(178) { animation: rotation linear infinite reverse; animation-delay: -42096ms; animation-duration: 43864ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(178) .flip_rotate { transform: rotateX(64deg); } .rotate:nth-of-type(178) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(178) .flip { left: calc(30% + 68px); } .rotate:nth-of-type(179) { animation: rotation linear infinite reverse; animation-delay: -42690ms; animation-duration: 33873ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(179) .flip_rotate { transform: rotateX(4deg); } .rotate:nth-of-type(179) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(179) .flip { left: calc(30% + 113px); } .rotate:nth-of-type(180) { animation: rotation linear infinite reverse; animation-delay: -43461ms; animation-duration: 51182ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(180) .flip_rotate { transform: rotateX(57deg); } .rotate:nth-of-type(180) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(180) .flip { left: calc(30% + 112px); } .rotate:nth-of-type(181) { animation: rotation linear infinite reverse; animation-delay: -41985ms; animation-duration: 34500ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(181) .flip_rotate { transform: rotateX(33deg); } .rotate:nth-of-type(181) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(181) .flip { left: calc(30% + 105px); } .rotate:nth-of-type(182) { animation: rotation linear infinite reverse; animation-delay: -48453ms; animation-duration: 59746ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(182) .flip_rotate { transform: rotateX(50deg); } .rotate:nth-of-type(182) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(182) .flip { left: calc(30% + 100px); } .rotate:nth-of-type(183) { animation: rotation linear infinite reverse; animation-delay: -49417ms; animation-duration: 21346ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(183) .flip_rotate { transform: rotateX(28deg); } .rotate:nth-of-type(183) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(183) .flip { left: calc(30% + 52px); } .rotate:nth-of-type(184) { animation: rotation linear infinite reverse; animation-delay: -46238ms; animation-duration: 56334ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(184) .flip_rotate { transform: rotateX(18deg); } .rotate:nth-of-type(184) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(184) .flip { left: calc(30% + 85px); } .rotate:nth-of-type(185) { animation: rotation linear infinite reverse; animation-delay: -45580ms; animation-duration: 28407ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(185) .flip_rotate { transform: rotateX(81deg); } .rotate:nth-of-type(185) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(185) .flip { left: calc(30% + 65px); } .rotate:nth-of-type(186) { animation: rotation linear infinite reverse; animation-delay: -49196ms; animation-duration: 37389ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(186) .flip_rotate { transform: rotateX(65deg); } .rotate:nth-of-type(186) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(186) .flip { left: calc(30% + 128px); } .rotate:nth-of-type(187) { animation: rotation linear infinite reverse; animation-delay: -49913ms; animation-duration: 54362ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(187) .flip_rotate { transform: rotateX(66deg); } .rotate:nth-of-type(187) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(187) .flip { left: calc(30% + 109px); } .rotate:nth-of-type(188) { animation: rotation linear infinite reverse; animation-delay: -49703ms; animation-duration: 24025ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(188) .flip_rotate { transform: rotateX(5deg); } .rotate:nth-of-type(188) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(188) .flip { left: calc(30% + 56px); } .rotate:nth-of-type(189) { animation: rotation linear infinite reverse; animation-delay: -44608ms; animation-duration: 52195ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(189) .flip_rotate { transform: rotateX(49deg); } .rotate:nth-of-type(189) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(189) .flip { left: calc(30% + 105px); } .rotate:nth-of-type(190) { animation: rotation linear infinite reverse; animation-delay: -42779ms; animation-duration: 39637ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(190) .flip_rotate { transform: rotateX(9deg); } .rotate:nth-of-type(190) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(190) .flip { left: calc(30% + 59px); } .rotate:nth-of-type(191) { animation: rotation linear infinite reverse; animation-delay: -43539ms; animation-duration: 55372ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(191) .flip_rotate { transform: rotateX(16deg); } .rotate:nth-of-type(191) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(191) .flip { left: calc(30% + 93px); } .rotate:nth-of-type(192) { animation: rotation linear infinite reverse; animation-delay: -43436ms; animation-duration: 58373ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(192) .flip_rotate { transform: rotateX(72deg); } .rotate:nth-of-type(192) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(192) .flip { left: calc(30% + 56px); } .rotate:nth-of-type(193) { animation: rotation linear infinite reverse; animation-delay: -49171ms; animation-duration: 55601ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(193) .flip_rotate { transform: rotateX(64deg); } .rotate:nth-of-type(193) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(193) .flip { left: calc(30% + 53px); } .rotate:nth-of-type(194) { animation: rotation linear infinite reverse; animation-delay: -49187ms; animation-duration: 41340ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(194) .flip_rotate { transform: rotateX(55deg); } .rotate:nth-of-type(194) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(194) .flip { left: calc(30% + 77px); } .rotate:nth-of-type(195) { animation: rotation linear infinite reverse; animation-delay: -45966ms; animation-duration: 57079ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(195) .flip_rotate { transform: rotateX(34deg); } .rotate:nth-of-type(195) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(195) .flip { left: calc(30% + 78px); } .rotate:nth-of-type(196) { animation: rotation linear infinite reverse; animation-delay: -48498ms; animation-duration: 58027ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(196) .flip_rotate { transform: rotateX(66deg); } .rotate:nth-of-type(196) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(196) .flip { left: calc(30% + 102px); } .rotate:nth-of-type(197) { animation: rotation linear infinite reverse; animation-delay: -46732ms; animation-duration: 22943ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(197) .flip_rotate { transform: rotateX(57deg); } .rotate:nth-of-type(197) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(197) .flip { left: calc(30% + 87px); } .rotate:nth-of-type(198) { animation: rotation linear infinite reverse; animation-delay: -41955ms; animation-duration: 34006ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(198) .flip_rotate { transform: rotateX(25deg); } .rotate:nth-of-type(198) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(198) .flip { left: calc(30% + 81px); } .rotate:nth-of-type(199) { animation: rotation linear infinite reverse; animation-delay: -42873ms; animation-duration: 55872ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(199) .flip_rotate { transform: rotateX(84deg); } .rotate:nth-of-type(199) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(199) .flip { left: calc(30% + 113px); } .rotate:nth-of-type(200) { animation: rotation linear infinite reverse; animation-delay: -43599ms; animation-duration: 41689ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(200) .flip_rotate { transform: rotateX(62deg); } .rotate:nth-of-type(200) .flip_pos { transform: translateY(600px); } .rotate:nth-of-type(200) .flip { left: calc(30% + 113px); } .rotate:nth-of-type(1) .flip { background-color: #f9f2ee; animation: rotate01 17666ms infinite; transform: rotateX(90deg); } @keyframes rotate01 { 0% { opacity: 0.6; } 25% { opacity: 0.4; } 50% { opacity: 0.6; } 100% { opacity: 0.4; } } .rotate:nth-of-type(2) .flip { background-color: #f9f2ee; animation: rotate01 7791ms infinite; transform: rotateX(90deg); } @keyframes rotate01 { 0% { opacity: 0.6; } 25% { opacity: 0.4; } 50% { opacity: 0.6; } 100% { opacity: 0.4; } } .rotate:nth-of-type(3) .flip { background-color: #f9f2ee; animation: rotate01 7229ms infinite; transform: rotateX(90deg); } @keyframes rotate01 { 0% { opacity: 0.6; } 25% { opacity: 0.4; } 50% { opacity: 0.6; } 100% { opacity: 0.4; } } .rotate:nth-of-type(4) .flip { background-color: #f9f2ee; animation: rotate01 10563ms infinite; transform: rotateX(90deg); } @keyframes rotate01 { 0% { opacity: 0.6; } 25% { opacity: 0.4; } 50% { opacity: 0.6; } 100% { opacity: 0.4; } } .rotate:nth-of-type(5) .flip { background-color: #f9f2ee; animation: rotate01 26822ms infinite; transform: rotateX(90deg); } @keyframes rotate01 { 0% { opacity: 0.6; } 25% { opacity: 0.4; } 50% { opacity: 0.6; } 100% { opacity: 0.4; } } .rotate:nth-of-type(6) .flip { background-color: #f9f2ee; animation: rotate01 11165ms infinite; transform: rotateX(90deg); } @keyframes rotate01 { 0% { opacity: 0.6; } 25% { opacity: 0.4; } 50% { opacity: 0.6; } 100% { opacity: 0.4; } } .rotate:nth-of-type(7) .flip { background-color: #f9f2ee; animation: rotate01 21471ms infinite; transform: rotateX(90deg); } @keyframes rotate01 { 0% { opacity: 0.6; } 25% { opacity: 0.4; } 50% { opacity: 0.6; } 100% { opacity: 0.4; } } .rotate:nth-of-type(8) .flip { background-color: #f9f2ee; animation: rotate01 10843ms infinite; transform: rotateX(90deg); } @keyframes rotate01 { 0% { opacity: 0.6; } 25% { opacity: 0.4; } 50% { opacity: 0.6; } 100% { opacity: 0.4; } } .rotate:nth-of-type(9) .flip { background-color: #f9f2ee; animation: rotate01 23981ms infinite; transform: rotateX(90deg); } @keyframes rotate01 { 0% { opacity: 0.6; } 25% { opacity: 0.4; } 50% { opacity: 0.6; } 100% { opacity: 0.4; } } .rotate:nth-of-type(10) .flip { background-color: #f9f2ee; animation: rotate01 32014ms infinite; transform: rotateX(90deg); } @keyframes rotate01 { 0% { opacity: 0.6; } 25% { opacity: 0.4; } 50% { opacity: 0.6; } 100% { opacity: 0.4; } } .rotate:nth-of-type(11) .flip { background-color: #f9f2ee; animation: rotate01 5046ms infinite; transform: rotateX(90deg); } @keyframes rotate01 { 0% { opacity: 0.6; } 25% { opacity: 0.4; } 50% { opacity: 0.6; } 100% { opacity: 0.4; } } .rotate:nth-of-type(12) .flip { background-color: #f9f2ee; animation: rotate01 8116ms infinite; transform: rotateX(90deg); } @keyframes rotate01 { 0% { opacity: 0.6; } 25% { opacity: 0.4; } 50% { opacity: 0.6; } 100% { opacity: 0.4; } } .rotate:nth-of-type(13) .flip { background-color: #f9f2ee; animation: rotate01 19022ms infinite; transform: rotateX(90deg); } @keyframes rotate01 { 0% { opacity: 0.6; } 25% { opacity: 0.4; } 50% { opacity: 0.6; } 100% { opacity: 0.4; } } .rotate:nth-of-type(14) .flip { background-color: #f9f2ee; animation: rotate01 22860ms infinite; transform: rotateX(90deg); } @keyframes rotate01 { 0% { opacity: 0.6; } 25% { opacity: 0.4; } 50% { opacity: 0.6; } 100% { opacity: 0.4; } } .rotate:nth-of-type(15) .flip { background-color: #f9f2ee; animation: rotate01 28813ms infinite; transform: rotateX(90deg); } @keyframes rotate01 { 0% { opacity: 0.6; } 25% { opacity: 0.4; } 50% { opacity: 0.6; } 100% { opacity: 0.4; } } .rotate:nth-of-type(16) .flip { background-color: #f9f2ee; animation: rotate01 18498ms infinite; transform: rotateX(90deg); } @keyframes rotate01 { 0% { opacity: 0.6; } 25% { opacity: 0.4; } 50% { opacity: 0.6; } 100% { opacity: 0.4; } } .rotate:nth-of-type(17) .flip { background-color: #f9f2ee; animation: rotate01 27978ms infinite; transform: rotateX(90deg); } @keyframes rotate01 { 0% { opacity: 0.6; } 25% { opacity: 0.4; } 50% { opacity: 0.6; } 100% { opacity: 0.4; } } .rotate:nth-of-type(18) .flip { background-color: #f9f2ee; animation: rotate01 9388ms infinite; transform: rotateX(90deg); } @keyframes rotate01 { 0% { opacity: 0.6; } 25% { opacity: 0.4; } 50% { opacity: 0.6; } 100% { opacity: 0.4; } } .rotate:nth-of-type(19) .flip { background-color: #f9f2ee; animation: rotate01 23071ms infinite; transform: rotateX(90deg); } @keyframes rotate01 { 0% { opacity: 0.6; } 25% { opacity: 0.4; } 50% { opacity: 0.6; } 100% { opacity: 0.4; } } .rotate:nth-of-type(20) .flip { background-color: #f9f2ee; animation: rotate01 27650ms infinite; transform: rotateX(90deg); } @keyframes rotate01 { 0% { opacity: 0.6; } 25% { opacity: 0.4; } 50% { opacity: 0.6; } 100% { opacity: 0.4; } } .rotate:nth-of-type(21) .flip { background-color: #f9f2ee; animation: rotate01 30440ms infinite; transform: rotateX(90deg); } @keyframes rotate01 { 0% { opacity: 0.6; } 25% { opacity: 0.4; } 50% { opacity: 0.6; } 100% { opacity: 0.4; } } .rotate:nth-of-type(22) .flip { background-color: #f9f2ee; animation: rotate01 19014ms infinite; transform: rotateX(90deg); } @keyframes rotate01 { 0% { opacity: 0.6; } 25% { opacity: 0.4; } 50% { opacity: 0.6; } 100% { opacity: 0.4; } } .rotate:nth-of-type(23) .flip { background-color: #f9f2ee; animation: rotate01 28383ms infinite; transform: rotateX(90deg); } @keyframes rotate01 { 0% { opacity: 0.6; } 25% { opacity: 0.4; } 50% { opacity: 0.6; } 100% { opacity: 0.4; } } .rotate:nth-of-type(24) .flip { background-color: #f9f2ee; animation: rotate01 25441ms infinite; transform: rotateX(90deg); } @keyframes rotate01 { 0% { opacity: 0.6; } 25% { opacity: 0.4; } 50% { opacity: 0.6; } 100% { opacity: 0.4; } } .rotate:nth-of-type(25) .flip { background-color: #f9f2ee; animation: rotate01 32151ms infinite; transform: rotateX(90deg); } @keyframes rotate01 { 0% { opacity: 0.6; } 25% { opacity: 0.4; } 50% { opacity: 0.6; } 100% { opacity: 0.4; } } .rotate:nth-of-type(26) .flip { background-color: #f9f2ee; animation: rotate01 32943ms infinite; transform: rotateX(90deg); } @keyframes rotate01 { 0% { opacity: 0.6; } 25% { opacity: 0.4; } 50% { opacity: 0.6; } 100% { opacity: 0.4; } } .rotate:nth-of-type(27) .flip { background-color: #f9f2ee; animation: rotate01 14567ms infinite; transform: rotateX(90deg); } @keyframes rotate01 { 0% { opacity: 0.6; } 25% { opacity: 0.4; } 50% { opacity: 0.6; } 100% { opacity: 0.4; } } .rotate:nth-of-type(28) .flip { background-color: #f9f2ee; animation: rotate01 32982ms infinite; transform: rotateX(90deg); } @keyframes rotate01 { 0% { opacity: 0.6; } 25% { opacity: 0.4; } 50% { opacity: 0.6; } 100% { opacity: 0.4; } } .rotate:nth-of-type(29) .flip { background-color: #f9f2ee; animation: rotate01 8886ms infinite; transform: rotateX(90deg); } @keyframes rotate01 { 0% { opacity: 0.6; } 25% { opacity: 0.4; } 50% { opacity: 0.6; } 100% { opacity: 0.4; } } .rotate:nth-of-type(30) .flip { background-color: #f9f2ee; animation: rotate01 18003ms infinite; transform: rotateX(90deg); } @keyframes rotate01 { 0% { opacity: 0.6; } 25% { opacity: 0.4; } 50% { opacity: 0.6; } 100% { opacity: 0.4; } } .rotate:nth-of-type(31) .flip { background-color: #f9f2ee; animation: rotate01 10016ms infinite; transform: rotateX(90deg); } @keyframes rotate01 { 0% { opacity: 0.6; } 25% { opacity: 0.4; } 50% { opacity: 0.6; } 100% { opacity: 0.4; } } .rotate:nth-of-type(32) .flip { background-color: #f9f2ee; animation: rotate01 10930ms infinite; transform: rotateX(90deg); } @keyframes rotate01 { 0% { opacity: 0.6; } 25% { opacity: 0.4; } 50% { opacity: 0.6; } 100% { opacity: 0.4; } } .rotate:nth-of-type(33) .flip { background-color: #f9f2ee; animation: rotate01 26943ms infinite; transform: rotateX(90deg); } @keyframes rotate01 { 0% { opacity: 0.6; } 25% { opacity: 0.4; } 50% { opacity: 0.6; } 100% { opacity: 0.4; } } .rotate:nth-of-type(34) .flip { background-color: #f9f2ee; animation: rotate01 21464ms infinite; transform: rotateX(90deg); } @keyframes rotate01 { 0% { opacity: 0.6; } 25% { opacity: 0.4; } 50% { opacity: 0.6; } 100% { opacity: 0.4; } } .rotate:nth-of-type(35) .flip { background-color: #f9f2ee; animation: rotate01 12460ms infinite; transform: rotateX(90deg); } @keyframes rotate01 { 0% { opacity: 0.6; } 25% { opacity: 0.4; } 50% { opacity: 0.6; } 100% { opacity: 0.4; } } .rotate:nth-of-type(36) .flip { background-color: #f9f2ee; animation: rotate01 8332ms infinite; transform: rotateX(90deg); } @keyframes rotate01 { 0% { opacity: 0.6; } 25% { opacity: 0.4; } 50% { opacity: 0.6; } 100% { opacity: 0.4; } } .rotate:nth-of-type(37) .flip { background-color: #f9f2ee; animation: rotate01 24318ms infinite; transform: rotateX(90deg); } @keyframes rotate01 { 0% { opacity: 0.6; } 25% { opacity: 0.4; } 50% { opacity: 0.6; } 100% { opacity: 0.4; } } .rotate:nth-of-type(38) .flip { background-color: #f9f2ee; animation: rotate01 13544ms infinite; transform: rotateX(90deg); } @keyframes rotate01 { 0% { opacity: 0.6; } 25% { opacity: 0.4; } 50% { opacity: 0.6; } 100% { opacity: 0.4; } } .rotate:nth-of-type(39) .flip { background-color: #f9f2ee; animation: rotate01 12862ms infinite; transform: rotateX(90deg); } @keyframes rotate01 { 0% { opacity: 0.6; } 25% { opacity: 0.4; } 50% { opacity: 0.6; } 100% { opacity: 0.4; } } .rotate:nth-of-type(40) .flip { background-color: #f9f2ee; animation: rotate01 27941ms infinite; transform: rotateX(90deg); } @keyframes rotate01 { 0% { opacity: 0.6; } 25% { opacity: 0.4; } 50% { opacity: 0.6; } 100% { opacity: 0.4; } } .rotate:nth-of-type(41) .flip { background-color: #f9f2ee; animation: rotate01 16898ms infinite; transform: rotateX(90deg); } @keyframes rotate01 { 0% { opacity: 0.6; } 25% { opacity: 0.4; } 50% { opacity: 0.6; } 100% { opacity: 0.4; } } .rotate:nth-of-type(42) .flip { background-color: #f9f2ee; animation: rotate01 13433ms infinite; transform: rotateX(90deg); } @keyframes rotate01 { 0% { opacity: 0.6; } 25% { opacity: 0.4; } 50% { opacity: 0.6; } 100% { opacity: 0.4; } } .rotate:nth-of-type(43) .flip { background-color: #f9f2ee; animation: rotate01 29694ms infinite; transform: rotateX(90deg); } @keyframes rotate01 { 0% { opacity: 0.6; } 25% { opacity: 0.4; } 50% { opacity: 0.6; } 100% { opacity: 0.4; } } .rotate:nth-of-type(44) .flip { background-color: #f9f2ee; animation: rotate01 21697ms infinite; transform: rotateX(90deg); } @keyframes rotate01 { 0% { opacity: 0.6; } 25% { opacity: 0.4; } 50% { opacity: 0.6; } 100% { opacity: 0.4; } } .rotate:nth-of-type(45) .flip { background-color: #f9f2ee; animation: rotate01 20027ms infinite; transform: rotateX(90deg); } @keyframes rotate01 { 0% { opacity: 0.6; } 25% { opacity: 0.4; } 50% { opacity: 0.6; } 100% { opacity: 0.4; } } .rotate:nth-of-type(46) .flip { background-color: #f9f2ee; animation: rotate01 24431ms infinite; transform: rotateX(90deg); } @keyframes rotate01 { 0% { opacity: 0.6; } 25% { opacity: 0.4; } 50% { opacity: 0.6; } 100% { opacity: 0.4; } } .rotate:nth-of-type(47) .flip { background-color: #f9f2ee; animation: rotate01 8970ms infinite; transform: rotateX(90deg); } @keyframes rotate01 { 0% { opacity: 0.6; } 25% { opacity: 0.4; } 50% { opacity: 0.6; } 100% { opacity: 0.4; } } .rotate:nth-of-type(48) .flip { background-color: #f9f2ee; animation: rotate01 30791ms infinite; transform: rotateX(90deg); } @keyframes rotate01 { 0% { opacity: 0.6; } 25% { opacity: 0.4; } 50% { opacity: 0.6; } 100% { opacity: 0.4; } } .rotate:nth-of-type(49) .flip { background-color: #f9f2ee; animation: rotate01 4498ms infinite; transform: rotateX(90deg); } @keyframes rotate01 { 0% { opacity: 0.6; } 25% { opacity: 0.4; } 50% { opacity: 0.6; } 100% { opacity: 0.4; } } .rotate:nth-of-type(50) .flip { background-color: #f9f2ee; animation: rotate01 32662ms infinite; transform: rotateX(90deg); } @keyframes rotate01 { 0% { opacity: 0.6; } 25% { opacity: 0.4; } 50% { opacity: 0.6; } 100% { opacity: 0.4; } } .rotate:nth-of-type(51) .flip { background-color: #f9f2ee; animation: rotate01 10272ms infinite; transform: rotateX(90deg); } @keyframes rotate01 { 0% { opacity: 0.6; } 25% { opacity: 0.4; } 50% { opacity: 0.6; } 100% { opacity: 0.4; } } .rotate:nth-of-type(52) .flip { background-color: #f9f2ee; animation: rotate01 12955ms infinite; transform: rotateX(90deg); } @keyframes rotate01 { 0% { opacity: 0.6; } 25% { opacity: 0.4; } 50% { opacity: 0.6; } 100% { opacity: 0.4; } } .rotate:nth-of-type(53) .flip { background-color: #f9f2ee; animation: rotate01 15297ms infinite; transform: rotateX(90deg); } @keyframes rotate01 { 0% { opacity: 0.6; } 25% { opacity: 0.4; } 50% { opacity: 0.6; } 100% { opacity: 0.4; } } .rotate:nth-of-type(54) .flip { background-color: #f9f2ee; animation: rotate01 4149ms infinite; transform: rotateX(90deg); } @keyframes rotate01 { 0% { opacity: 0.6; } 25% { opacity: 0.4; } 50% { opacity: 0.6; } 100% { opacity: 0.4; } } .rotate:nth-of-type(55) .flip { background-color: #f9f2ee; animation: rotate01 13206ms infinite; transform: rotateX(90deg); } @keyframes rotate01 { 0% { opacity: 0.6; } 25% { opacity: 0.4; } 50% { opacity: 0.6; } 100% { opacity: 0.4; } } .rotate:nth-of-type(56) .flip { background-color: #f9f2ee; animation: rotate01 21802ms infinite; transform: rotateX(90deg); } @keyframes rotate01 { 0% { opacity: 0.6; } 25% { opacity: 0.4; } 50% { opacity: 0.6; } 100% { opacity: 0.4; } } .rotate:nth-of-type(57) .flip { background-color: #f9f2ee; animation: rotate01 4871ms infinite; transform: rotateX(90deg); } @keyframes rotate01 { 0% { opacity: 0.6; } 25% { opacity: 0.4; } 50% { opacity: 0.6; } 100% { opacity: 0.4; } } .rotate:nth-of-type(58) .flip { background-color: #f9f2ee; animation: rotate01 22389ms infinite; transform: rotateX(90deg); } @keyframes rotate01 { 0% { opacity: 0.6; } 25% { opacity: 0.4; } 50% { opacity: 0.6; } 100% { opacity: 0.4; } } .rotate:nth-of-type(59) .flip { background-color: #f9f2ee; animation: rotate01 29880ms infinite; transform: rotateX(90deg); } @keyframes rotate01 { 0% { opacity: 0.6; } 25% { opacity: 0.4; } 50% { opacity: 0.6; } 100% { opacity: 0.4; } } .rotate:nth-of-type(60) .flip { background-color: #f9f2ee; animation: rotate01 22321ms infinite; transform: rotateX(90deg); } @keyframes rotate01 { 0% { opacity: 0.6; } 25% { opacity: 0.4; } 50% { opacity: 0.6; } 100% { opacity: 0.4; } } .rotate:nth-of-type(61) .flip { background-color: #f9f2ee; animation: rotate01 5061ms infinite; transform: rotateX(90deg); } @keyframes rotate01 { 0% { opacity: 0.6; } 25% { opacity: 0.4; } 50% { opacity: 0.6; } 100% { opacity: 0.4; } } .rotate:nth-of-type(62) .flip { background-color: #f9f2ee; animation: rotate01 31821ms infinite; transform: rotateX(90deg); } @keyframes rotate01 { 0% { opacity: 0.6; } 25% { opacity: 0.4; } 50% { opacity: 0.6; } 100% { opacity: 0.4; } } .rotate:nth-of-type(63) .flip { background-color: #f9f2ee; animation: rotate01 5066ms infinite; transform: rotateX(90deg); } @keyframes rotate01 { 0% { opacity: 0.6; } 25% { opacity: 0.4; } 50% { o.........完整代码请登录后点击上方下载按钮下载查看
网友评论0