粒子漂浮旋转动画效果
代码语言:html
所属分类:粒子
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CodePen - Perticle Rotation #03</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, #fdb7b9 20%, #de5d6f 50%, #b1414d); } div { transform-style: preserve-3d; } .container { perspective: 280px; } .container_rotate { transform: rotate(24deg); } /* flip style */ .flip { position: absolute; top: -280px; width: 24px; height: 24px; border-radius: 50%; } .rotate:nth-of-type(1) { animation: rotation linear infinite reverse; animation-delay: -40177ms; animation-duration: 23466ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(1) .flip_rotate { transform: rotateX(32deg); } .rotate:nth-of-type(1) .flip_pos { transform: translateY(217px); } .rotate:nth-of-type(1) .flip { left: calc(30% + 203px); } .rotate:nth-of-type(2) { animation: rotation linear infinite reverse; animation-delay: -44663ms; animation-duration: 34145ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(2) .flip_rotate { transform: rotateX(40deg); } .rotate:nth-of-type(2) .flip_pos { transform: translateY(220px); } .rotate:nth-of-type(2) .flip { left: calc(30% + 432px); } .rotate:nth-of-type(3) { animation: rotation linear infinite reverse; animation-delay: -48796ms; animation-duration: 37943ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(3) .flip_rotate { transform: rotateX(19deg); } .rotate:nth-of-type(3) .flip_pos { transform: translateY(201px); } .rotate:nth-of-type(3) .flip { left: calc(30% + 245px); } .rotate:nth-of-type(4) { animation: rotation linear infinite reverse; animation-delay: -48582ms; animation-duration: 59941ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(4) .flip_rotate { transform: rotateX(13deg); } .rotate:nth-of-type(4) .flip_pos { transform: translateY(367px); } .rotate:nth-of-type(4) .flip { left: calc(30% + 257px); } .rotate:nth-of-type(5) { animation: rotation linear infinite reverse; animation-delay: -45769ms; animation-duration: 47725ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(5) .flip_rotate { transform: rotateX(16deg); } .rotate:nth-of-type(5) .flip_pos { transform: translateY(211px); } .rotate:nth-of-type(5) .flip { left: calc(30% + 441px); } .rotate:nth-of-type(6) { animation: rotation linear infinite reverse; animation-delay: -46280ms; animation-duration: 34132ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(6) .flip_rotate { transform: rotateX(36deg); } .rotate:nth-of-type(6) .flip_pos { transform: translateY(230px); } .rotate:nth-of-type(6) .flip { left: calc(30% + 387px); } .rotate:nth-of-type(7) { animation: rotation linear infinite reverse; animation-delay: -48086ms; animation-duration: 22654ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(7) .flip_rotate { transform: rotateX(45deg); } .rotate:nth-of-type(7) .flip_pos { transform: translateY(322px); } .rotate:nth-of-type(7) .flip { left: calc(30% + 201px); } .rotate:nth-of-type(8) { animation: rotation linear infinite reverse; animation-delay: -47447ms; animation-duration: 21402ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(8) .flip_rotate { transform: rotateX(11deg); } .rotate:nth-of-type(8) .flip_pos { transform: translateY(228px); } .rotate:nth-of-type(8) .flip { left: calc(30% + 423px); } .rotate:nth-of-type(9) { animation: rotation linear infinite reverse; animation-delay: -48215ms; animation-duration: 22964ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(9) .flip_rotate { transform: rotateX(14deg); } .rotate:nth-of-type(9) .flip_pos { transform: translateY(355px); } .rotate:nth-of-type(9) .flip { left: calc(30% + 234px); } .rotate:nth-of-type(10) { animation: rotation linear infinite reverse; animation-delay: -49478ms; animation-duration: 60092ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(10) .flip_rotate { transform: rotateX(3deg); } .rotate:nth-of-type(10) .flip_pos { transform: translateY(221px); } .rotate:nth-of-type(10) .flip { left: calc(30% + 276px); } .rotate:nth-of-type(11) { animation: rotation linear infinite reverse; animation-delay: -46321ms; animation-duration: 40628ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(11) .flip_rotate { transform: rotateX(22deg); } .rotate:nth-of-type(11) .flip_pos { transform: translateY(265px); } .rotate:nth-of-type(11) .flip { left: calc(30% + 385px); } .rotate:nth-of-type(12) { animation: rotation linear infinite reverse; animation-delay: -42242ms; animation-duration: 63033ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(12) .flip_rotate { transform: rotateX(34deg); } .rotate:nth-of-type(12) .flip_pos { transform: translateY(302px); } .rotate:nth-of-type(12) .flip { left: calc(30% + 296px); } .rotate:nth-of-type(13) { animation: rotation linear infinite reverse; animation-delay: -46981ms; animation-duration: 45222ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(13) .flip_rotate { transform: rotateX(18deg); } .rotate:nth-of-type(13) .flip_pos { transform: translateY(222px); } .rotate:nth-of-type(13) .flip { left: calc(30% + 367px); } .rotate:nth-of-type(14) { animation: rotation linear infinite reverse; animation-delay: -48823ms; animation-duration: 20148ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(14) .flip_rotate { transform: rotateX(23deg); } .rotate:nth-of-type(14) .flip_pos { transform: translateY(249px); } .rotate:nth-of-type(14) .flip { left: calc(30% + 303px); } .rotate:nth-of-type(15) { animation: rotation linear infinite reverse; animation-delay: -48669ms; animation-duration: 43169ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(15) .flip_rotate { transform: rotateX(42deg); } .rotate:nth-of-type(15) .flip_pos { transform: translateY(378px); } .rotate:nth-of-type(15) .flip { left: calc(30% + 409px); } .rotate:nth-of-type(16) { animation: rotation linear infinite reverse; animation-delay: -44040ms; animation-duration: 58574ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(16) .flip_rotate { transform: rotateX(33deg); } .rotate:nth-of-type(16) .flip_pos { transform: translateY(319px); } .rotate:nth-of-type(16) .flip { left: calc(30% + 349px); } .rotate:nth-of-type(17) { animation: rotation linear infinite reverse; animation-delay: -45600ms; animation-duration: 64569ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(17) .flip_rotate { transform: rotateX(20deg); } .rotate:nth-of-type(17) .flip_pos { transform: translateY(319px); } .rotate:nth-of-type(17) .flip { left: calc(30% + 281px); } .rotate:nth-of-type(18) { animation: rotation linear infinite reverse; animation-delay: -44242ms; animation-duration: 27266ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(18) .flip_rotate { transform: rotateX(5deg); } .rotate:nth-of-type(18) .flip_pos { transform: translateY(210px); } .rotate:nth-of-type(18) .flip { left: calc(30% + 294px); } .rotate:nth-of-type(19) { animation: rotation linear infinite reverse; animation-delay: -44416ms; animation-duration: 37679ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(19) .flip_rotate { transform: rotateX(19deg); } .rotate:nth-of-type(19) .flip_pos { transform: translateY(310px); } .rotate:nth-of-type(19) .flip { left: calc(30% + 327px); } .rotate:nth-of-type(20) { animation: rotation linear infinite reverse; animation-delay: -49599ms; animation-duration: 40592ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(20) .flip_rotate { transform: rotateX(26deg); } .rotate:nth-of-type(20) .flip_pos { transform: translateY(197px); } .rotate:nth-of-type(20) .flip { left: calc(30% + 310px); } .rotate:nth-of-type(21) { animation: rotation linear infinite reverse; animation-delay: -46479ms; animation-duration: 64778ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(21) .flip_rotate { transform: rotateX(37deg); } .rotate:nth-of-type(21) .flip_pos { transform: translateY(300px); } .rotate:nth-of-type(21) .flip { left: calc(30% + 475px); } .rotate:nth-of-type(22) { animation: rotation linear infinite reverse; animation-delay: -41318ms; animation-duration: 44500ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(22) .flip_rotate { transform: rotateX(20deg); } .rotate:nth-of-type(22) .flip_pos { transform: translateY(235px); } .rotate:nth-of-type(22) .flip { left: calc(30% + 383px); } .rotate:nth-of-type(23) { animation: rotation linear infinite reverse; animation-delay: -45716ms; animation-duration: 42043ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(23) .flip_rotate { transform: rotateX(24deg); } .rotate:nth-of-type(23) .flip_pos { transform: translateY(192px); } .rotate:nth-of-type(23) .flip { left: calc(30% + 293px); } .rotate:nth-of-type(24) { animation: rotation linear infinite reverse; animation-delay: -44697ms; animation-duration: 51923ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(24) .flip_rotate { transform: rotateX(14deg); } .rotate:nth-of-type(24) .flip_pos { transform: translateY(186px); } .rotate:nth-of-type(24) .flip { left: calc(30% + 351px); } .rotate:nth-of-type(25) { animation: rotation linear infinite reverse; animation-delay: -49612ms; animation-duration: 46400ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(25) .flip_rotate { transform: rotateX(15deg); } .rotate:nth-of-type(25) .flip_pos { transform: translateY(334px); } .rotate:nth-of-type(25) .flip { left: calc(30% + 206px); } .rotate:nth-of-type(26) { animation: rotation linear infinite reverse; animation-delay: -47660ms; animation-duration: 41920ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(26) .flip_rotate { transform: rotateX(19deg); } .rotate:nth-of-type(26) .flip_pos { transform: translateY(187px); } .rotate:nth-of-type(26) .flip { left: calc(30% + 263px); } .rotate:nth-of-type(27) { animation: rotation linear infinite reverse; animation-delay: -42456ms; animation-duration: 28978ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(27) .flip_rotate { transform: rotateX(16deg); } .rotate:nth-of-type(27) .flip_pos { transform: translateY(227px); } .rotate:nth-of-type(27) .flip { left: calc(30% + 318px); } .rotate:nth-of-type(28) { animation: rotation linear infinite reverse; animation-delay: -47336ms; animation-duration: 27485ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(28) .flip_rotate { transform: rotateX(41deg); } .rotate:nth-of-type(28) .flip_pos { transform: translateY(284px); } .rotate:nth-of-type(28) .flip { left: calc(30% + 470px); } .rotate:nth-of-type(29) { animation: rotation linear infinite reverse; animation-delay: -47179ms; animation-duration: 37043ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(29) .flip_rotate { transform: rotateX(16deg); } .rotate:nth-of-type(29) .flip_pos { transform: translateY(207px); } .rotate:nth-of-type(29) .flip { left: calc(30% + 486px); } .rotate:nth-of-type(30) { animation: rotation linear infinite reverse; animation-delay: -45402ms; animation-duration: 65472ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(30) .flip_rotate { transform: rotateX(8deg); } .rotate:nth-of-type(30) .flip_pos { transform: translateY(327px); } .rotate:nth-of-type(30) .flip { left: calc(30% + 375px); } .rotate:nth-of-type(31) { animation: rotation linear infinite reverse; animation-delay: -45744ms; animation-duration: 67484ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(31) .flip_rotate { transform: rotateX(35deg); } .rotate:nth-of-type(31) .flip_pos { transform: translateY(348px); } .rotate:nth-of-type(31) .flip { left: calc(30% + 400px); } .rotate:nth-of-type(32) { animation: rotation linear infinite reverse; animation-delay: -45128ms; animation-duration: 59456ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(32) .flip_rotate { transform: rotateX(3deg); } .rotate:nth-of-type(32) .flip_pos { transform: translateY(332px); } .rotate:nth-of-type(32) .flip { left: calc(30% + 234px); } .rotate:nth-of-type(33) { animation: rotation linear infinite reverse; animation-delay: -43093ms; animation-duration: 41236ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(33) .flip_rotate { transform: rotateX(42deg); } .rotate:nth-of-type(33) .flip_pos { transform: translateY(277px); } .rotate:nth-of-type(33) .flip { left: calc(30% + 290px); } .rotate:nth-of-type(34) { animation: rotation linear infinite reverse; animation-delay: -45362ms; animation-duration: 53274ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(34) .flip_rotate { transform: rotateX(18deg); } .rotate:nth-of-type(34) .flip_pos { transform: translateY(365px); } .rotate:nth-of-type(34) .flip { left: calc(30% + 263px); } .rotate:nth-of-type(35) { animation: rotation linear infinite reverse; animation-delay: -48688ms; animation-duration: 44350ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(35) .flip_rotate { transform: rotateX(38deg); } .rotate:nth-of-type(35) .flip_pos { transform: translateY(313px); } .rotate:nth-of-type(35) .flip { left: calc(30% + 282px); } .rotate:nth-of-type(36) { animation: rotation linear infinite reverse; animation-delay: -49624ms; animation-duration: 56273ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(36) .flip_rotate { transform: rotateX(24deg); } .rotate:nth-of-type(36) .flip_pos { transform: translateY(183px); } .rotate:nth-of-type(36) .flip { left: calc(30% + 305px); } .rotate:nth-of-type(37) { animation: rotation linear infinite reverse; animation-delay: -42167ms; animation-duration: 29284ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(37) .flip_rotate { transform: rotateX(34deg); } .rotate:nth-of-type(37) .flip_pos { transform: translateY(274px); } .rotate:nth-of-type(37) .flip { left: calc(30% + 365px); } .rotate:nth-of-type(38) { animation: rotation linear infinite reverse; animation-delay: -45444ms; animation-duration: 24490ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(38) .flip_rotate { transform: rotateX(25deg); } .rotate:nth-of-type(38) .flip_pos { transform: translateY(265px); } .rotate:nth-of-type(38) .flip { left: calc(30% + 324px); } .rotate:nth-of-type(39) { animation: rotation linear infinite reverse; animation-delay: -47720ms; animation-duration: 60684ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(39) .flip_rotate { transform: rotateX(21deg); } .rotate:nth-of-type(39) .flip_pos { transform: translateY(224px); } .rotate:nth-of-type(39) .flip { left: calc(30% + 333px); } .rotate:nth-of-type(40) { animation: rotation linear infinite reverse; animation-delay: -49715ms; animation-duration: 31997ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(40) .flip_rotate { transform: rotateX(39deg); } .rotate:nth-of-type(40) .flip_pos { transform: translateY(197px); } .rotate:nth-of-type(40) .flip { left: calc(30% + 450px); } .rotate:nth-of-type(41) { animation: rotation linear infinite reverse; animation-delay: -42705ms; animation-duration: 32270ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(41) .flip_rotate { transform: rotateX(1deg); } .rotate:nth-of-type(41) .flip_pos { transform: translateY(212px); } .rotate:nth-of-type(41) .flip { left: calc(30% + 484px); } .rotate:nth-of-type(42) { animation: rotation linear infinite reverse; animation-delay: -41827ms; animation-duration: 31407ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(42) .flip_rotate { transform: rotateX(23deg); } .rotate:nth-of-type(42) .flip_pos { transform: translateY(291px); } .rotate:nth-of-type(42) .flip { left: calc(30% + 242px); } .rotate:nth-of-type(43) { animation: rotation linear infinite reverse; animation-delay: -47140ms; animation-duration: 38267ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(43) .flip_rotate { transform: rotateX(23deg); } .rotate:nth-of-type(43) .flip_pos { transform: translateY(357px); } .rotate:nth-of-type(43) .flip { left: calc(30% + 279px); } .rotate:nth-of-type(44) { animation: rotation linear infinite reverse; animation-delay: -41396ms; animation-duration: 36419ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(44) .flip_rotate { transform: rotateX(20deg); } .rotate:nth-of-type(44) .flip_pos { transform: translateY(318px); } .rotate:nth-of-type(44) .flip { left: calc(30% + 320px); } .rotate:nth-of-type(45) { animation: rotation linear infinite reverse; animation-delay: -46707ms; animation-duration: 27867ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(45) .flip_rotate { transform: rotateX(43deg); } .rotate:nth-of-type(45) .flip_pos { transform: translateY(191px); } .rotate:nth-of-type(45) .flip { left: calc(30% + 388px); } .rotate:nth-of-type(46) { animation: rotation linear infinite reverse; animation-delay: -45099ms; animation-duration: 46211ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(46) .flip_rotate { transform: rotateX(4deg); } .rotate:nth-of-type(46) .flip_pos { transform: translateY(239px); } .rotate:nth-of-type(46) .flip { left: calc(30% + 288px); } .rotate:nth-of-type(47) { animation: rotation linear infinite reverse; animation-delay: -43781ms; animation-duration: 67491ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(47) .flip_rotate { transform: rotateX(16deg); } .rotate:nth-of-type(47) .flip_pos { transform: translateY(260px); } .rotate:nth-of-type(47) .flip { left: calc(30% + 290px); } .rotate:nth-of-type(48) { animation: rotation linear infinite reverse; animation-delay: -44791ms; animation-duration: 55809ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(48) .flip_rotate { transform: rotateX(43deg); } .rotate:nth-of-type(48) .flip_pos { transform: translateY(361px); } .rotate:nth-of-type(48) .flip { left: calc(30% + 494px); } .rotate:nth-of-type(49) { animation: rotation linear infinite reverse; animation-delay: -47889ms; animation-duration: 20927ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(49) .flip_rotate { transform: rotateX(4deg); } .rotate:nth-of-type(49) .flip_pos { transform: translateY(311px); } .rotate:nth-of-type(49) .flip { left: calc(30% + 302px); } .rotate:nth-of-type(50) { animation: rotation linear infinite reverse; animation-delay: -46552ms; animation-duration: 40190ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(50) .flip_rotate { transform: rotateX(40deg); } .rotate:nth-of-type(50) .flip_pos { transform: translateY(202px); } .rotate:nth-of-type(50) .flip { left: calc(30% + 417px); } .rotate:nth-of-type(51) { animation: rotation linear infinite reverse; animation-delay: -49013ms; animation-duration: 24857ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(51) .flip_rotate { transform: rotateX(21deg); } .rotate:nth-of-type(51) .flip_pos { transform: translateY(371px); } .rotate:nth-of-type(51) .flip { left: calc(30% + 412px); } .rotate:nth-of-type(52) { animation: rotation linear infinite reverse; animation-delay: -44237ms; animation-duration: 61089ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(52) .flip_rotate { transform: rotateX(31deg); } .rotate:nth-of-type(52) .flip_pos { transform: translateY(307px); } .rotate:nth-of-type(52) .flip { left: calc(30% + 490px); } .rotate:nth-of-type(53) { animation: rotation linear infinite reverse; animation-delay: -41984ms; animation-duration: 65551ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(53) .flip_rotate { transform: rotateX(37deg); } .rotate:nth-of-type(53) .flip_pos { transform: translateY(363px); } .rotate:nth-of-type(53) .flip { left: calc(30% + 460px); } .rotate:nth-of-type(54) { animation: rotation linear infinite reverse; animation-delay: -49944ms; animation-duration: 39355ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(54) .flip_rotate { transform: rotateX(31deg); } .rotate:nth-of-type(54) .flip_pos { transform: translateY(204px); } .rotate:nth-of-type(54) .flip { left: calc(30% + 371px); } .rotate:nth-of-type(55) { animation: rotation linear infinite reverse; animation-delay: -46797ms; animation-duration: 26495ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(55) .flip_rotate { transform: rotateX(28deg); } .rotate:nth-of-type(55) .flip_pos { transform: translateY(285px); } .rotate:nth-of-type(55) .flip { left: calc(30% + 232px); } .rotate:nth-of-type(56) { animation: rotation linear infinite reverse; animation-delay: -42482ms; animation-duration: 54989ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(56) .flip_rotate { transform: rotateX(8deg); } .rotate:nth-of-type(56) .flip_pos { transform: translateY(289px); } .rotate:nth-of-type(56) .flip { left: calc(30% + 449px); } .rotate:nth-of-type(57) { animation: rotation linear infinite reverse; animation-delay: -43299ms; animation-duration: 58194ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(57) .flip_rotate { transform: rotateX(26deg); } .rotate:nth-of-type(57) .flip_pos { transform: translateY(218px); } .rotate:nth-of-type(57) .flip { left: calc(30% + 410px); } .rotate:nth-of-type(58) { animation: rotation linear infinite reverse; animation-delay: -48365ms; animation-duration: 69370ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(58) .flip_rotate { transform: rotateX(45deg); } .rotate:nth-of-type(58) .flip_pos { transform: translateY(341px); } .rotate:nth-of-type(58) .flip { left: calc(30% + 336px); } .rotate:nth-of-type(59) { animation: rotation linear infinite reverse; animation-delay: -43365ms; animation-duration: 49933ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(59) .flip_rotate { transform: rotateX(13deg); } .rotate:nth-of-type(59) .flip_pos { transform: translateY(199px); } .rotate:nth-of-type(59) .flip { left: calc(30% + 306px); } .rotate:nth-of-type(60) { animation: rotation linear infinite reverse; animation-delay: -48091ms; animation-duration: 37321ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(60) .flip_rotate { transform: rotateX(30deg); } .rotate:nth-of-type(60) .flip_pos { transform: translateY(325px); } .rotate:nth-of-type(60) .flip { left: calc(30% + 330px); } .rotate:nth-of-type(61) { animation: rotation linear infinite reverse; animation-delay: -45295ms; animation-duration: 65397ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(61) .flip_rotate { transform: rotateX(3deg); } .rotate:nth-of-type(61) .flip_pos { transform: translateY(367px); } .rotate:nth-of-type(61) .flip { left: calc(30% + 474px); } .rotate:nth-of-type(62) { animation: rotation linear infinite reverse; animation-delay: -45932ms; animation-duration: 46051ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(62) .flip_rotate { transform: rotateX(22deg); } .rotate:nth-of-type(62) .flip_pos { transform: translateY(380px); } .rotate:nth-of-type(62) .flip { left: calc(30% + 379px); } .rotate:nth-of-type(63) { animation: rotation linear infinite reverse; animation-delay: -48648ms; animation-duration: 25092ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(63) .flip_rotate { transform: rotateX(39deg); } .rotate:nth-of-type(63) .flip_pos { transform: translateY(323px); } .rotate:nth-of-type(63) .flip { left: calc(30% + 282px); } .rotate:nth-of-type(64) { animation: rotation linear infinite reverse; animation-delay: -49570ms; animation-duration: 51648ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(64) .flip_rotate { transform: rotateX(14deg); } .rotate:nth-of-type(64) .flip_pos { transform: translateY(210px); } .rotate:nth-of-type(64) .flip { left: calc(30% + 270px); } .rotate:nth-of-type(65) { animation: rotation linear infinite reverse; animation-delay: -47236ms; animation-duration: 56658ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(65) .flip_rotate { transform: rotateX(24deg); } .rotate:nth-of-type(65) .flip_pos { transform: translateY(265px); } .rotate:nth-of-type(65) .flip { left: calc(30% + 341px); } .rotate:nth-of-type(66) { animation: rotation linear infinite reverse; animation-delay: -48365ms; animation-duration: 27907ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(66) .flip_rotate { transform: rotateX(20deg); } .rotate:nth-of-type(66) .flip_pos { transform: translateY(337px); } .rotate:nth-of-type(66) .flip { left: calc(30% + 417px); } .rotate:nth-of-type(67) { animation: rotation linear infinite reverse; animation-delay: -40106ms; animation-duration: 53208ms; } @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(227px); } .rotate:nth-of-type(67) .flip { left: calc(30% + 419px); } .rotate:nth-of-type(68) { animation: rotation linear infinite reverse; animation-delay: -43968ms; animation-duration: 24265ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(68) .flip_rotate { transform: rotateX(4deg); } .rotate:nth-of-type(68) .flip_pos { transform: translateY(334px); } .rotate:nth-of-type(68) .flip { left: calc(30% + 235px); } .rotate:nth-of-type(69) { animation: rotation linear infinite reverse; animation-delay: -48446ms; animation-duration: 68989ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(69) .flip_rotate { transform: rotateX(25deg); } .rotate:nth-of-type(69) .flip_pos { transform: translateY(250px); } .rotate:nth-of-type(69) .flip { left: calc(30% + 368px); } .rotate:nth-of-type(70) { animation: rotation linear infinite reverse; animation-delay: -42954ms; animation-duration: 47625ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(70) .flip_rotate { transform: rotateX(5deg); } .rotate:nth-of-type(70) .flip_pos { transform: translateY(235px); } .rotate:nth-of-type(70) .flip { left: calc(30% + 407px); } .rotate:nth-of-type(71) { animation: rotation linear infinite reverse; animation-delay: -47404ms; animation-duration: 62762ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(71) .flip_rotate { transform: rotateX(16deg); } .rotate:nth-of-type(71) .flip_pos { transform: translateY(234px); } .rotate:nth-of-type(71) .flip { left: calc(30% + 331px); } .rotate:nth-of-type(72) { animation: rotation linear infinite reverse; animation-delay: -42627ms; animation-duration: 38075ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(72) .flip_rotate { transform: rotateX(39deg); } .rotate:nth-of-type(72) .flip_pos { transform: translateY(253px); } .rotate:nth-of-type(72) .flip { left: calc(30% + 315px); } .rotate:nth-of-type(73) { animation: rotation linear infinite reverse; animation-delay: -47875ms; animation-duration: 38362ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(73) .flip_rotate { transform: rotateX(29deg); } .rotate:nth-of-type(73) .flip_pos { transform: translateY(325px); } .rotate:nth-of-type(73) .flip { left: calc(30% + 221px); } .rotate:nth-of-type(74) { animation: rotation linear infinite reverse; animation-delay: -47666ms; animation-duration: 46071ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(74) .flip_rotate { transform: rotateX(13deg); } .rotate:nth-of-type(74) .flip_pos { transform: translateY(366px); } .rotate:nth-of-type(74) .flip { left: calc(30% + 302px); } .rotate:nth-of-type(75) { animation: rotation linear infinite reverse; animation-delay: -43865ms; animation-duration: 54437ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(75) .flip_rotate { transform: rotateX(41deg); } .rotate:nth-of-type(75) .flip_pos { transform: translateY(333px); } .rotate:nth-of-type(75) .flip { left: calc(30% + 269px); } .rotate:nth-of-type(76) { animation: rotation linear infinite reverse; animation-delay: -47181ms; animation-duration: 62462ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(76) .flip_rotate { transform: rotateX(24deg); } .rotate:nth-of-type(76) .flip_pos { transform: translateY(302px); } .rotate:nth-of-type(76) .flip { left: calc(30% + 332px); } .rotate:nth-of-type(77) { animation: rotation linear infinite reverse; animation-delay: -41615ms; animation-duration: 62136ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(77) .flip_rotate { transform: rotateX(11deg); } .rotate:nth-of-type(77) .flip_pos { transform: translateY(237px); } .rotate:nth-of-type(77) .flip { left: calc(30% + 448px); } .rotate:nth-of-type(78) { animation: rotation linear infinite reverse; animation-delay: -46440ms; animation-duration: 50480ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(78) .flip_rotate { transform: rotateX(39deg); } .rotate:nth-of-type(78) .flip_pos { transform: translateY(247px); } .rotate:nth-of-type(78) .flip { left: calc(30% + 441px); } .rotate:nth-of-type(79) { animation: rotation linear infinite reverse; animation-delay: -43706ms; animation-duration: 27501ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(79) .flip_rotate { transform: rotateX(11deg); } .rotate:nth-of-type(79) .flip_pos { transform: translateY(192px); } .rotate:nth-of-type(79) .flip { left: calc(30% + 225px); } .rotate:nth-of-type(80) { animation: rotation linear infinite reverse; animation-delay: -46458ms; animation-duration: 28098ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(80) .flip_rotate { transform: rotateX(11deg); } .rotate:nth-of-type(80) .flip_pos { transform: translateY(364px); } .rotate:nth-of-type(80) .flip { left: calc(30% + 484px); } .rotate:nth-of-type(81) { animation: rotation linear infinite reverse; animation-delay: -47272ms; animation-duration: 66443ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(81) .flip_rotate { transform: rotateX(45deg); } .rotate:nth-of-type(81) .flip_pos { transform: translateY(374px); } .rotate:nth-of-type(81) .flip { left: calc(30% + 212px); } .rotate:nth-of-type(82) { animation: rotation linear infinite reverse; animation-delay: -41674ms; animation-duration: 30562ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(82) .flip_rotate { transform: rotateX(29deg); } .rotate:nth-of-type(82) .flip_pos { transform: translateY(221px); } .rotate:nth-of-type(82) .flip { left: calc(30% + 496px); } .rotate:nth-of-type(83) { animation: rotation linear infinite reverse; animation-delay: -45229ms; animation-duration: 37149ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(83) .flip_rotate { transform: rotateX(20deg); } .rotate:nth-of-type(83) .flip_pos { transform: translateY(300px); } .rotate:nth-of-type(83) .flip { left: calc(30% + 294px); } .rotate:nth-of-type(84) { animation: rotation linear infinite reverse; animation-delay: -44896ms; animation-duration: 51908ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(84) .flip_rotate { transform: rotateX(41deg); } .rotate:nth-of-type(84) .flip_pos { transform: translateY(214px); } .rotate:nth-of-type(84) .flip { left: calc(30% + 318px); } .rotate:nth-of-type(85) { animation: rotation linear infinite reverse; animation-delay: -42482ms; animation-duration: 38713ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(85) .flip_rotate { transform: rotateX(3deg); } .rotate:nth-of-type(85) .flip_pos { transform: translateY(354px); } .rotate:nth-of-type(85) .flip { left: calc(30% + 286px); } .rotate:nth-of-type(86) { animation: rotation linear infinite reverse; animation-delay: -47682ms; animation-duration: 54836ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(86) .flip_rotate { transform: rotateX(34deg); } .rotate:nth-of-type(86) .flip_pos { transform: translateY(223px); } .rotate:nth-of-type(86) .flip { left: calc(30% + 483px); } .rotate:nth-of-type(87) { animation: rotation linear infinite reverse; animation-delay: -40277ms; animation-duration: 36588ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(87) .flip_rotate { transform: rotateX(23deg); } .rotate:nth-of-type(87) .flip_pos { transform: translateY(350px); } .rotate:nth-of-type(87) .flip { left: calc(30% + 484px); } .rotate:nth-of-type(88) { animation: rotation linear infinite reverse; animation-delay: -40077ms; animation-duration: 26669ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(88) .flip_rotate { transform: rotateX(12deg); } .rotate:nth-of-type(88) .flip_pos { transform: translateY(279px); } .rotate:nth-of-type(88) .flip { left: calc(30% + 412px); } .rotate:nth-of-type(89) { animation: rotation linear infinite reverse; animation-delay: -48158ms; animation-duration: 40620ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(89) .flip_rotate { transform: rotateX(41deg); } .rotate:nth-of-type(89) .flip_pos { transform: translateY(280px); } .rotate:nth-of-type(89) .flip { left: calc(30% + 496px); } .rotate:nth-of-type(90) { animation: rotation linear infinite reverse; animation-delay: -43999ms; animation-duration: 24117ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(90) .flip_rotate { transform: rotateX(42deg); } .rotate:nth-of-type(90) .flip_pos { transform: translateY(317px); } .rotate:nth-of-type(90) .flip { left: calc(30% + 202px); } .rotate:nth-of-type(91) { animation: rotation linear infinite reverse; animation-delay: -47122ms; animation-duration: 28584ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(91) .flip_rotate { transform: rotateX(13deg); } .rotate:nth-of-type(91) .flip_pos { transform: translateY(229px); } .rotate:nth-of-type(91) .flip { left: calc(30% + 205px); } .rotate:nth-of-type(92) { animation: rotation linear infinite reverse; animation-delay: -43124ms; animation-duration: 23119ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(92) .flip_rotate { transform: rotateX(1deg); } .rotate:nth-of-type(92) .flip_pos { transform: translateY(323px); } .rotate:nth-of-type(92) .flip { left: calc(30% + 436px); } .rotate:nth-of-type(93) { animation: rotation linear infinite reverse; animation-delay: -43357ms; animation-duration: 69361ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(93) .flip_rotate { transform: rotateX(29deg); } .rotate:nth-of-type(93) .flip_pos { transform: translateY(329px); } .rotate:nth-of-type(93) .flip { left: calc(30% + 302px); } .rotate:nth-of-type(94) { animation: rotation linear infinite reverse; animation-delay: -47712ms; animation-duration: 24485ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(94) .flip_rotate { transform: rotateX(16deg); } .rotate:nth-of-type(94) .flip_pos { transform: translateY(214px); } .rotate:nth-of-type(94) .flip { left: calc(30% + 280px); } .rotate:nth-of-type(95) { animation: rotation linear infinite reverse; animation-delay: -49410ms; animation-duration: 58372ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(95) .flip_rotate { transform: rotateX(21deg); } .rotate:nth-of-type(95) .flip_pos { transform: translateY(187px); } .rotate:nth-of-type(95) .flip { left: calc(30% + 408px); } .rotate:nth-of-type(96) { animation: rotation linear infinite reverse; animation-delay: -44012ms; animation-duration: 39807ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(96) .flip_rotate { transform: rotateX(44deg); } .rotate:nth-of-type(96) .flip_pos { transform: translateY(280px); } .rotate:nth-of-type(96) .flip { left: calc(30% + 348px); } .rotate:nth-of-type(97) { animation: rotation linear infinite reverse; animation-delay: -42356ms; animation-duration: 32578ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(97) .flip_rotate { transform: rotateX(39deg); } .rotate:nth-of-type(97) .flip_pos { transform: translateY(279px); } .rotate:nth-of-type(97) .flip { left: calc(30% + 237px); } .rotate:nth-of-type(98) { animation: rotation linear infinite reverse; animation-delay: -47737ms; animation-duration: 46209ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(98) .flip_rotate { transform: rotateX(35deg); } .rotate:nth-of-type(98) .flip_pos { transform: translateY(296px); } .rotate:nth-of-type(98) .flip { left: calc(30% + 300px); } .rotate:nth-of-type(99) { animation: rotation linear infinite reverse; animation-delay: -49360ms; animation-duration: 56328ms; } @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(205px); } .rotate:nth-of-type(99) .flip { left: calc(30% + 210px); } .rotate:nth-of-type(100) { animation: rotation linear infinite reverse; animation-delay: -45284ms; animation-duration: 41707ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(100) .flip_rotate { transform: rotateX(44deg); } .rotate:nth-of-type(100) .flip_pos { transform: translateY(191px); } .rotate:nth-of-type(100) .flip { left: calc(30% + 418px); } .rotate:nth-of-type(101) { animation: rotation linear infinite reverse; animation-delay: -46393ms; animation-duration: 25668ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(101) .flip_rotate { transform: rotateX(30deg); } .rotate:nth-of-type(101) .flip_pos { transform: translateY(308px); } .rotate:nth-of-type(101) .flip { left: calc(30% + 488px); } .rotate:nth-of-type(102) { animation: rotation linear infinite reverse; animation-delay: -42635ms; animation-duration: 30279ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(102) .flip_rotate { transform: rotateX(18deg); } .rotate:nth-of-type(102) .flip_pos { transform: translateY(191px); } .rotate:nth-of-type(102) .flip { left: calc(30% + 469px); } .rotate:nth-of-type(103) { animation: rotation linear infinite reverse; animation-delay: -41930ms; animation-duration: 57748ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(103) .flip_rotate { transform: rotateX(30deg); } .rotate:nth-of-type(103) .flip_pos { transform: translateY(203px); } .rotate:nth-of-type(103) .flip { left: calc(30% + 270px); } .rotate:nth-of-type(104) { animation: rotation linear infinite reverse; animation-delay: -46680ms; animation-duration: 37137ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(104) .flip_rotate { transform: rotateX(24deg); } .rotate:nth-of-type(104) .flip_pos { transform: translateY(261px); } .rotate:nth-of-type(104) .flip { left: calc(30% + 278px); } .rotate:nth-of-type(105) { animation: rotation linear infinite reverse; animation-delay: -49485ms; animation-duration: 32272ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(105) .flip_rotate { transform: rotateX(2deg); } .rotate:nth-of-type(105) .flip_pos { transform: translateY(339px); } .rotate:nth-of-type(105) .flip { left: calc(30% + 436px); } .rotate:nth-of-type(106) { animation: rotation linear infinite reverse; animation-delay: -43591ms; animation-duration: 25407ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(106) .flip_rotate { transform: rotateX(28deg); } .rotate:nth-of-type(106) .flip_pos { transform: translateY(276px); } .rotate:nth-of-type(106) .flip { left: calc(30% + 446px); } .rotate:nth-of-type(107) { animation: rotation linear infinite reverse; animation-delay: -47786ms; animation-duration: 30924ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(107) .flip_rotate { transform: rotateX(36deg); } .rotate:nth-of-type(107) .flip_pos { transform: translateY(209px); } .rotate:nth-of-type(107) .flip { left: calc(30% + 365px); } .rotate:nth-of-type(108) { animation: rotation linear infinite reverse; animation-delay: -46035ms; animation-duration: 31897ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(108) .flip_rotate { transform: rotateX(25deg); } .rotate:nth-of-type(108) .flip_pos { transform: translateY(271px); } .rotate:nth-of-type(108) .flip { left: calc(30% + 473px); } .rotate:nth-of-type(109) { animation: rotation linear infinite reverse; animation-delay: -40444ms; animation-duration: 54457ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(109) .flip_rotate { transform: rotateX(4deg); } .rotate:nth-of-type(109) .flip_pos { transform: translateY(249px); } .rotate:nth-of-type(109) .flip { left: calc(30% + 500px); } .rotate:nth-of-type(110) { animation: rotation linear infinite reverse; animation-delay: -45693ms; animation-duration: 27321ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(110) .flip_rotate { transform: rotateX(1deg); } .rotate:nth-of-type(110) .flip_pos { transform: translateY(185px); } .rotate:nth-of-type(110) .flip { left: calc(30% + 250px); } .rotate:nth-of-type(111) { animation: rotation linear infinite reverse; animation-delay: -45658ms; animation-duration: 38907ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(111) .flip_rotate { transform: rotateX(32deg); } .rotate:nth-of-type(111) .flip_pos { transform: translateY(207px); } .rotate:nth-of-type(111) .flip { left: calc(30% + 204px); } .rotate:nth-of-type(112) { animation: rotation linear infinite reverse; animation-delay: -45983ms; animation-duration: 37941ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(112) .flip_rotate { transform: rotateX(13deg); } .rotate:nth-of-type(112) .flip_pos { transform: translateY(322px); } .rotate:nth-of-type(112) .flip { left: calc(30% + 372px); } .rotate:nth-of-type(113) { animation: rotation linear infinite reverse; animation-delay: -49545ms; animation-duration: 44907ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(113) .flip_rotate { transform: rotateX(38deg); } .rotate:nth-of-type(113) .flip_pos { transform: translateY(260px); } .rotate:nth-of-type(113) .flip { left: calc(30% + 405px); } .rotate:nth-of-type(114) { animation: rotation linear infinite reverse; animation-delay: -40389ms; animation-duration: 51898ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(114) .flip_rotate { transform: rotateX(34deg); } .rotate:nth-of-type(114) .flip_pos { transform: translateY(249px); } .rotate:nth-of-type(114) .flip { left: calc(30% + 331px); } .rotate:nth-of-type(115) { animation: rotation linear infinite reverse; animation-delay: -41895ms; animation-duration: 40885ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(115) .flip_rotate { transform: rotateX(6deg); } .rotate:nth-of-type(115) .flip_pos { transform: translateY(273px); } .rotate:nth-of-type(115) .flip { left: calc(30% + 258px); } .rotate:nth-of-type(116) { animation: rotation linear infinite reverse; animation-delay: -42890ms; animation-duration: 69106ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(116) .flip_rotate { transform: rotateX(2deg); } .rotate:nth-of-type(116) .flip_pos { transform: translateY(241px); } .rotate:nth-of-type(116) .flip { left: calc(30% + 250px); } .rotate:nth-of-type(117) { animation: rotation linear infinite reverse; animation-delay: -41309ms; animation-duration: 60707ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(117) .flip_rotate { transform: rotateX(43deg); } .rotate:nth-of-type(117) .flip_pos { transform: translateY(315px); } .rotate:nth-of-type(117) .flip { left: calc(30% + 226px); } .rotate:nth-of-type(118) { animation: rotation linear infinite reverse; animation-delay: -42057ms; animation-duration: 49690ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(118) .flip_rotate { transform: rotateX(35deg); } .rotate:nth-of-type(118) .flip_pos { transform: translateY(318px); } .rotate:nth-of-type(118) .flip { left: calc(30% + 239px); } .rotate:nth-of-type(119) { animation: rotation linear infinite reverse; animation-delay: -49733ms; animation-duration: 65647ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(119) .flip_rotate { transform: rotateX(45deg); } .rotate:nth-of-type(119) .flip_pos { transform: translateY(376px); } .rotate:nth-of-type(119) .flip { left: calc(30% + 397px); } .rotate:nth-of-type(120) { animation: rotation linear infinite reverse; animation-delay: -41559ms; animation-duration: 22977ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(120) .flip_rotate { transform: rotateX(13deg); } .rotate:nth-of-type(120) .flip_pos { transform: translateY(269px); } .rotate:nth-of-type(120) .flip { left: calc(30% + 391px); } .rotate:nth-of-type(121) { animation: rotation linear infinite reverse; animation-delay: -43173ms; animation-duration: 44313ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(121) .flip_rotate { transform: rotateX(15deg); } .rotate:nth-of-type(121) .flip_pos { transform: translateY(294px); } .rotate:nth-of-type(121) .flip { left: calc(30% + 317px); } .rotate:nth-of-type(122) { animation: rotation linear infinite reverse; animation-delay: -44531ms; animation-duration: 55731ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(122) .flip_rotate { transform: rotateX(43deg); } .rotate:nth-of-type(122) .flip_pos { transform: translateY(294px); } .rotate:nth-of-type(122) .flip { left: calc(30% + 438px); } .rotate:nth-of-type(123) { animation: rotation linear infinite reverse; animation-delay: -46337ms; animation-duration: 31478ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(123) .flip_rotate { transform: rotateX(11deg); } .rotate:nth-of-type(123) .flip_pos { transform: translateY(297px); } .rotate:nth-of-type(123) .flip { left: calc(30% + 339px); } .rotate:nth-of-type(124) { animation: rotation linear infinite reverse; animation-delay: -45029ms; animation-duration: 65823ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(124) .flip_rotate { transform: rotateX(33deg); } .rotate:nth-of-type(124) .flip_pos { transform: translateY(293px); } .rotate:nth-of-type(124) .flip { left: calc(30% + 211px); } .rotate:nth-of-type(125) { animation: rotation linear infinite reverse; animation-delay: -41020ms; animation-duration: 62830ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(125) .flip_rotate { transform: rotateX(31deg); } .rotate:nth-of-type(125) .flip_pos { transform: translateY(215px); } .rotate:nth-of-type(125) .flip { left: calc(30% + 207px); } .rotate:nth-of-type(126) { animation: rotation linear infinite reverse; animation-delay: -49011ms; animation-duration: 66387ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(126) .flip_rotate { transform: rotateX(14deg); } .rotate:nth-of-type(126) .flip_pos { transform: translateY(330px); } .rotate:nth-of-type(126) .flip { left: calc(30% + 296px); } .rotate:nth-of-type(127) { animation: rotation linear infinite reverse; animation-delay: -41470ms; animation-duration: 23121ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(127) .flip_rotate { transform: rotateX(4deg); } .rotate:nth-of-type(127) .flip_pos { transform: translateY(362px); } .rotate:nth-of-type(127) .flip { left: calc(30% + 348px); } .rotate:nth-of-type(128) { animation: rotation linear infinite reverse; animation-delay: -44426ms; animation-duration: 31850ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(128) .flip_rotate { transform: rotateX(12deg); } .rotate:nth-of-type(128) .flip_pos { transform: translateY(283px); } .rotate:nth-of-type(128) .flip { left: calc(30% + 383px); } .rotate:nth-of-type(129) { animation: rotation linear infinite reverse; animation-delay: -41653ms; animation-duration: 46483ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(129) .flip_rotate { transform: rotateX(40deg); } .rotate:nth-of-type(129) .flip_pos { transform: translateY(209px); } .rotate:nth-of-type(129) .flip { left: calc(30% + 279px); } .rotate:nth-of-type(130) { animation: rotation linear infinite reverse; animation-delay: -45497ms; animation-duration: 58786ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(130) .flip_rotate { transform: rotateX(29deg); } .rotate:nth-of-type(130) .flip_pos { transform: translateY(323px); } .rotate:nth-of-type(130) .flip { left: calc(30% + 455px); } .rotate:nth-of-type(131) { animation: rotation linear infinite reverse; animation-delay: -44888ms; animation-duration: 33911ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(131) .flip_rotate { transform: rotateX(6deg); } .rotate:nth-of-type(131) .flip_pos { transform: translateY(246px); } .rotate:nth-of-type(131) .flip { left: calc(30% + 432px); } .rotate:nth-of-type(132) { animation: rotation linear infinite reverse; animation-delay: -40217ms; animation-duration: 28092ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(132) .flip_rotate { transform: rotateX(29deg); } .rotate:nth-of-type(132) .flip_pos { transform: translateY(214px); } .rotate:nth-of-type(132) .flip { left: calc(30% + 329px); } .rotate:nth-of-type(133) { animation: rotation linear infinite reverse; animation-delay: -45917ms; animation-duration: 33196ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(133) .flip_rotate { transform: rotateX(35deg); } .rotate:nth-of-type(133) .flip_pos { transform: translateY(311px); } .rotate:nth-of-type(133) .flip { left: calc(30% + 427px); } .rotate:nth-of-type(134) { animation: rotation linear infinite reverse; animation-delay: -47149ms; animation-duration: 48117ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(134) .flip_rotate { transform: rotateX(6deg); } .rotate:nth-of-type(134) .flip_pos { transform: translateY(272px); } .rotate:nth-of-type(134) .flip { left: calc(30% + 460px); } .rotate:nth-of-type(135) { animation: rotation linear infinite reverse; animation-delay: -46535ms; animation-duration: 63441ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(135) .flip_rotate { transform: rotateX(20deg); } .rotate:nth-of-type(135) .flip_pos { transform: translateY(380px); } .rotate:nth-of-type(135) .flip { left: calc(30% + 356px); } .rotate:nth-of-type(136) { animation: rotation linear infinite reverse; animation-delay: -49118ms; animation-duration: 63912ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(136) .flip_rotate { transform: rotateX(19deg); } .rotate:nth-of-type(136) .flip_pos { transform: translateY(228px); } .rotate:nth-of-type(136) .flip { left: calc(30% + 479px); } .rotate:nth-of-type(137) { animation: rotation linear infinite reverse; animation-delay: -40569ms; animation-duration: 20041ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(137) .flip_rotate { transform: rotateX(44deg); } .rotate:nth-of-type(137) .flip_pos { transform: translateY(197px); } .rotate:nth-of-type(137) .flip { left: calc(30% + 344px); } .rotate:nth-of-type(138) { animation: rotation linear infinite reverse; animation-delay: -47381ms; animation-duration: 62577ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(138) .flip_rotate { transform: rotateX(9deg); } .rotate:nth-of-type(138) .flip_pos { transform: translateY(203px); } .rotate:nth-of-type(138) .flip { left: calc(30% + 238px); } .rotate:nth-of-type(139) { animation: rotation linear infinite reverse; animation-delay: -45680ms; animation-duration: 29925ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(139) .flip_rotate { transform: rotateX(33deg); } .rotate:nth-of-type(139) .flip_pos { transform: translateY(315px); } .rotate:nth-of-type(139) .flip { left: calc(30% + 360px); } .rotate:nth-of-type(140) { animation: rotation linear infinite reverse; animation-delay: -48768ms; animation-duration: 27697ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(140) .flip_rotate { transform: rotateX(27deg); } .rotate:nth-of-type(140) .flip_pos { transform: translateY(258px); } .rotate:nth-of-type(140) .flip { left: calc(30% + 305px); } .rotate:nth-of-type(141) { animation: rotation linear infinite reverse; animation-delay: -48615ms; animation-duration: 34551ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(141) .flip_rotate { transform: rotateX(31deg); } .rotate:nth-of-type(141) .flip_pos { transform: translateY(231px); } .rotate:nth-of-type(141) .flip { left: calc(30% + 388px); } .rotate:nth-of-type(142) { animation: rotation linear infinite reverse; animation-delay: -49625ms; animation-duration: 42701ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(142) .flip_rotate { transform: rotateX(5deg); } .rotate:nth-of-type(142) .flip_pos { transform: translateY(256px); } .rotate:nth-of-type(142) .flip { left: calc(30% + 221px); } .rotate:nth-of-type(143) { animation: rotation linear infinite reverse; animation-delay: -47271ms; animation-duration: 48351ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(143) .flip_rotate { transform: rotateX(29deg); } .rotate:nth-of-type(143) .flip_pos { transform: translateY(346px); } .rotate:nth-of-type(143) .flip { left: calc(30% + 351px); } .rotate:nth-of-type(144) { animation: rotation linear infinite reverse; animation-delay: -40299ms; animation-duration: 43750ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(144) .flip_rotate { transform: rotateX(36deg); } .rotate:nth-of-type(144) .flip_pos { transform: translateY(334px); } .rotate:nth-of-type(144) .flip { left: calc(30% + 356px); } .rotate:nth-of-type(145) { animation: rotation linear infinite reverse; animation-delay: -49090ms; animation-duration: 33142ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(145) .flip_rotate { transform: rotateX(13deg); } .rotate:nth-of-type(145) .flip_pos { transform: translateY(357px); } .rotate:nth-of-type(145) .flip { left: calc(30% + 246px); } .rotate:nth-of-type(146) { animation: rotation linear infinite reverse; animation-delay: -42299ms; animation-duration: 52976ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(146) .flip_rotate { transform: rotateX(4deg); } .rotate:nth-of-type(146) .flip_pos { transform: translateY(368px); } .rotate:nth-of-type(146) .flip { left: calc(30% + 235px); } .rotate:nth-of-type(147) { animation: rotation linear infinite reverse; animation-delay: -40211ms; animation-duration: 23781ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(147) .flip_rotate { transform: rotateX(7deg); } .rotate:nth-of-type(147) .flip_pos { transform: translateY(223px); } .rotate:nth-of-type(147) .flip { left: calc(30% + 218px); } .rotate:nth-of-type(148) { animation: rotation linear infinite reverse; animation-delay: -47421ms; animation-duration: 27299ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(148) .flip_rotate { transform: rotateX(32deg); } .rotate:nth-of-type(148) .flip_pos { transform: translateY(359px); } .rotate:nth-of-type(148) .flip { left: calc(30% + 289px); } .rotate:nth-of-type(149) { animation: rotation linear infinite reverse; animation-delay: -46980ms; animation-duration: 51573ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(149) .flip_rotate { transform: rotateX(33deg); } .rotate:nth-of-type(149) .flip_pos { transform: translateY(262px); } .rotate:nth-of-type(149) .flip { left: calc(30% + 278px); } .rotate:nth-of-type(150) { animation: rotation linear infinite reverse; animation-delay: -46121ms; animation-duration: 59335ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(150) .flip_rotate { transform: rotateX(42deg); } .rotate:nth-of-type(150) .flip_pos { transform: translateY(208px); } .rotate:nth-of-type(150) .flip { left: calc(30% + 256px); } .rotate:nth-of-type(151) { animation: rotation linear infinite reverse; animation-delay: -49276ms; animation-duration: 37412ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(151) .flip_rotate { transform: rotateX(6deg); } .rotate:nth-of-type(151) .flip_pos { transform: translateY(268px); } .rotate:nth-of-type(151) .flip { left: calc(30% + 226px); } .rotate:nth-of-type(152) { animation: rotation linear infinite reverse; animation-delay: -44334ms; animation-duration: 65551ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(152) .flip_rotate { transform: rotateX(7deg); } .rotate:nth-of-type(152) .flip_pos { transform: translateY(252px); } .rotate:nth-of-type(152) .flip { left: calc(30% + 382px); } .rotate:nth-of-type(153) { animation: rotation linear infinite reverse; animation-delay: -47967ms; animation-duration: 55848ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(153) .flip_rotate { transform: rotateX(13deg); } .rotate:nth-of-type(153) .flip_pos { transform: translateY(347px); } .rotate:nth-of-type(153) .flip { left: calc(30% + 210px); } .rotate:nth-of-type(154) { animation: rotation linear infinite reverse; animation-delay: -43736ms; animation-duration: 34839ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(154) .flip_rotate { transform: rotateX(11deg); } .rotate:nth-of-type(154) .flip_pos { transform: translateY(380px); } .rotate:nth-of-type(154) .flip { left: calc(30% + 333px); } .rotate:nth-of-type(155) { animation: rotation linear infinite reverse; animation-delay: -41625ms; animation-duration: 22643ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(155) .flip_rotate { transform: rotateX(5deg); } .rotate:nth-of-type(155) .flip_pos { transform: translateY(341px); } .rotate:nth-of-type(155) .flip { left: calc(30% + 372px); } .rotate:nth-of-type(156) { animation: rotation linear infinite reverse; animation-delay: -49467ms; animation-duration: 29771ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(156) .flip_rotate { transform: rotateX(45deg); } .rotate:nth-of-type(156) .flip_pos { transform: translateY(232px); } .rotate:nth-of-type(156) .flip { left: calc(30% + 302px); } .rotate:nth-of-type(157) { animation: rotation linear infinite reverse; animation-delay: -40740ms; animation-duration: 62305ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(157) .flip_rotate { transform: rotateX(1deg); } .rotate:nth-of-type(157) .flip_pos { transform: translateY(197px); } .rotate:nth-of-type(157) .flip { left: calc(30% + 231px); } .rotate:nth-of-type(158) { animation: rotation linear infinite reverse; animation-delay: -49748ms; animation-duration: 47550ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(158) .flip_rotate { transform: rotateX(7deg); } .rotate:nth-of-type(158) .flip_pos { transform: translateY(310px); } .rotate:nth-of-type(158) .flip { left: calc(30% + 204px); } .rotate:nth-of-type(159) { animation: rotation linear infinite reverse; animation-delay: -49376ms; animation-duration: 21039ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(159) .flip_rotate { transform: rotateX(13deg); } .rotate:nth-of-type(159) .flip_pos { transform: translateY(228px); } .rotate:nth-of-type(159) .flip { left: calc(30% + 459px); } .rotate:nth-of-type(160) { animation: rotation linear infinite reverse; animation-delay: -45459ms; animation-duration: 50921ms; } @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(293px); } .rotate:nth-of-type(160) .flip { left: calc(30% + 371px); } .rotate:nth-of-type(161) { animation: rotation linear infinite reverse; animation-delay: -41216ms; animation-duration: 34896ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(161) .flip_rotate { transform: rotateX(13deg); } .rotate:nth-of-type(161) .flip_pos { transform: translateY(193px); } .rotate:nth-of-type(161) .flip { left: calc(30% + 388px); } .rotate:nth-of-type(162) { animation: rotation linear infinite reverse; animation-delay: -43429ms; animation-duration: 66568ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(162) .flip_rotate { transform: rotateX(5deg); } .rotate:nth-of-type(162) .flip_pos { transform: translateY(186px); } .rotate:nth-of-type(162) .flip { left: calc(30% + 455px); } .rotate:nth-of-type(163) { animation: rotation linear infinite reverse; animation-delay: -42422ms; animation-duration: 41223ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(163) .flip_rotate { transform: rotateX(17deg); } .rotate:nth-of-type(163) .flip_pos { transform: translateY(330px); } .rotate:nth-of-type(163) .flip { left: calc(30% + 496px); } .rotate:nth-of-type(164) { animation: rotation linear infinite reverse; animation-delay: -49399ms; animation-duration: 31548ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(164) .flip_rotate { transform: rotateX(7deg); } .rotate:nth-of-type(164) .flip_pos { transform: translateY(337px); } .rotate:nth-of-type(164) .flip { left: calc(30% + 467px); } .rotate:nth-of-type(165) { animation: rotation linear infinite reverse; animation-delay: -40156ms; animation-duration: 35060ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(165) .flip_rotate { transform: rotateX(27deg); } .rotate:nth-of-type(165) .flip_pos { transform: translateY(374px); } .rotate:nth-of-type(165) .flip { left: calc(30% + 439px); } .rotate:nth-of-type(166) { animation: rotation linear infinite reverse; animation-delay: -40371ms; animation-duration: 22870ms; } @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(350px); } .rotate:nth-of-type(166) .flip { left: calc(30% + 402px); } .rotate:nth-of-type(167) { animation: rotation linear infinite reverse; animation-delay: -46508ms; animation-duration: 48766ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(167) .flip_rotate { transform: rotateX(13deg); } .rotate:nth-of-type(167) .flip_pos { transform: translateY(295px); } .rotate:nth-of-type(167) .flip { left: calc(30% + 250px); } .rotate:nth-of-type(168) { animation: rotation linear infinite reverse; animation-delay: -47191ms; animation-duration: 48413ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(168) .flip_rotate { transform: rotateX(36deg); } .rotate:nth-of-type(168) .flip_pos { transform: translateY(185px); } .rotate:nth-of-type(168) .flip { left: calc(30% + 309px); } .rotate:nth-of-type(169) { animation: rotation linear infinite reverse; animation-delay: -48854ms; animation-duration: 62846ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(169) .flip_rotate { transform: rotateX(23deg); } .rotate:nth-of-type(169) .flip_pos { transform: translateY(269px); } .rotate:nth-of-type(169) .flip { left: calc(30% + 490px); } .rotate:nth-of-type(170) { animation: rotation linear infinite reverse; animation-delay: -49912ms; animation-duration: 61130ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(170) .flip_rotate { transform: rotateX(23deg); } .rotate:nth-of-type(170) .flip_pos { transform: translateY(357px); } .rotate:nth-of-type(170) .flip { left: calc(30% + 385px); } .rotate:nth-of-type(171) { animation: rotation linear infinite reverse; animation-delay: -48158ms; animation-duration: 24098ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(171) .flip_rotate { transform: rotateX(13deg); } .rotate:nth-of-type(171) .flip_pos { transform: translateY(323px); } .rotate:nth-of-type(171) .flip { left: calc(30% + 416px); } .rotate:nth-of-type(172) { animation: rotation linear infinite reverse; animation-delay: -40569ms; animation-duration: 64733ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(172) .flip_rotate { transform: rotateX(43deg); } .rotate:nth-of-type(172) .flip_pos { transform: translateY(269px); } .rotate:nth-of-type(172) .flip { left: calc(30% + 314px); } .rotate:nth-of-type(173) { animation: rotation linear infinite reverse; animation-delay: -42722ms; animation-duration: 64627ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(173) .flip_rotate { transform: rotateX(38deg); } .rotate:nth-of-type(173) .flip_pos { transform: translateY(315px); } .rotate:nth-of-type(173) .flip { left: calc(30% + 332px); } .rotate:nth-of-type(174) { animation: rotation linear infinite reverse; animation-delay: -48022ms; animation-duration: 21731ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(174) .flip_rotate { transform: rotateX(12deg); } .rotate:nth-of-type(174) .flip_pos { transform: translateY(214px); } .rotate:nth-of-type(174) .flip { left: calc(30% + 373px); } .rotate:nth-of-type(175) { animation: rotation linear infinite reverse; animation-delay: -48053ms; animation-duration: 67431ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(175) .flip_rotate { transform: rotateX(19deg); } .rotate:nth-of-type(175) .flip_pos { transform: translateY(186px); } .rotate:nth-of-type(175) .flip { left: calc(30% + 331px); } .rotate:nth-of-type(176) { animation: rotation linear infinite reverse; animation-delay: -46403ms; animation-duration: 44153ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(176) .flip_rotate { transform: rotateX(3deg); } .rotate:nth-of-type(176) .flip_pos { transform: translateY(251px); } .rotate:nth-of-type(176) .flip { left: calc(30% + 274px); } .rotate:nth-of-type(177) { animation: rotation linear infinite reverse; animation-delay: -46243ms; animation-duration: 28026ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(177) .flip_rotate { transform: rotateX(27deg); } .rotate:nth-of-type(177) .flip_pos { transform: translateY(214px); } .rotate:nth-of-type(177) .flip { left: calc(30% + 334px); } .rotate:nth-of-type(178) { animation: rotation linear infinite reverse; animation-delay: -40373ms; animation-duration: 35189ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(178) .flip_rotate { transform: rotateX(4deg); } .rotate:nth-of-type(178) .flip_pos { transform: translateY(310px); } .rotate:nth-of-type(178) .flip { left: calc(30% + 291px); } .rotate:nth-of-type(179) { animation: rotation linear infinite reverse; animation-delay: -49466ms; animation-duration: 24305ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(179) .flip_rotate { transform: rotateX(40deg); } .rotate:nth-of-type(179) .flip_pos { transform: translateY(230px); } .rotate:nth-of-type(179) .flip { left: calc(30% + 310px); } .rotate:nth-of-type(180) { animation: rotation linear infinite reverse; animation-delay: -43256ms; animation-duration: 36492ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(180) .flip_rotate { transform: rotateX(17deg); } .rotate:nth-of-type(180) .flip_pos { transform: translateY(277px); } .rotate:nth-of-type(180) .flip { left: calc(30% + 250px); } .rotate:nth-of-type(181) { animation: rotation linear infinite reverse; animation-delay: -41561ms; animation-duration: 35014ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(181) .flip_rotate { transform: rotateX(43deg); } .rotate:nth-of-type(181) .flip_pos { transform: translateY(205px); } .rotate:nth-of-type(181) .flip { left: calc(30% + 406px); } .rotate:nth-of-type(182) { animation: rotation linear infinite reverse; animation-delay: -47344ms; animation-duration: 31744ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(182) .flip_rotate { transform: rotateX(1deg); } .rotate:nth-of-type(182) .flip_pos { transform: translateY(209px); } .rotate:nth-of-type(182) .flip { left: calc(30% + 241px); } .rotate:nth-of-type(183) { animation: rotation linear infinite reverse; animation-delay: -44808ms; animation-duration: 20184ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(183) .flip_rotate { transform: rotateX(19deg); } .rotate:nth-of-type(183) .flip_pos { transform: translateY(219px); } .rotate:nth-of-type(183) .flip { left: calc(30% + 278px); } .rotate:nth-of-type(184) { animation: rotation linear infinite reverse; animation-delay: -44664ms; animation-duration: 32528ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(184) .flip_rotate { transform: rotateX(16deg); } .rotate:nth-of-type(184) .flip_pos { transform: translateY(312px); } .rotate:nth-of-type(184) .flip { left: calc(30% + 466px); } .rotate:nth-of-type(185) { animation: rotation linear infinite reverse; animation-delay: -49799ms; animation-duration: 45891ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(185) .flip_rotate { transform: rotateX(44deg); } .rotate:nth-of-type(185) .flip_pos { transform: translateY(205px); } .rotate:nth-of-type(185) .flip { left: calc(30% + 316px); } .rotate:nth-of-type(186) { animation: rotation linear infinite reverse; animation-delay: -47125ms; animation-duration: 53693ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(186) .flip_rotate { transform: rotateX(38deg); } .rotate:nth-of-type(186) .flip_pos { transform: translateY(252px); } .rotate:nth-of-type(186) .flip { left: calc(30% + 494px); } .rotate:nth-of-type(187) { animation: rotation linear infinite reverse; animation-delay: -42369ms; animation-duration: 28687ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(187) .flip_rotate { transform: rotateX(21deg); } .rotate:nth-of-type(187) .flip_pos { transform: translateY(345px); } .rotate:nth-of-type(187) .flip { left: calc(30% + 336px); } .rotate:nth-of-type(188) { animation: rotation linear infinite reverse; animation-delay: -43289ms; animation-duration: 32064ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(188) .flip_rotate { transform: rotateX(10deg); } .rotate:nth-of-type(188) .flip_pos { transform: translateY(276px); } .rotate:nth-of-type(188) .flip { left: calc(30% + 213px); } .rotate:nth-of-type(189) { animation: rotation linear infinite reverse; animation-delay: -45539ms; animation-duration: 41752ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(189) .flip_rotate { transform: rotateX(12deg); } .rotate:nth-of-type(189) .flip_pos { transform: translateY(218px); } .rotate:nth-of-type(189) .flip { left: calc(30% + 483px); } .rotate:nth-of-type(190) { animation: rotation linear infinite reverse; animation-delay: -48284ms; animation-duration: 21057ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(190) .flip_rotate { transform: rotateX(6deg); } .rotate:nth-of-type(190) .flip_pos { transform: translateY(288px); } .rotate:nth-of-type(190) .flip { left: calc(30% + 294px); } .rotate:nth-of-type(191) { animation: rotation linear infinite reverse; animation-delay: -45688ms; animation-duration: 46021ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(191) .flip_rotate { transform: rotateX(27deg); } .rotate:nth-of-type(191) .flip_pos { transform: translateY(355px); } .rotate:nth-of-type(191) .flip { left: calc(30% + 384px); } .rotate:nth-of-type(192) { animation: rotation linear infinite reverse; animation-delay: -47215ms; animation-duration: 63242ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(192) .flip_rotate { transform: rotateX(37deg); } .rotate:nth-of-type(192) .flip_pos { transform: translateY(186px); } .rotate:nth-of-type(192) .flip { left: calc(30% + 228px); } .rotate:nth-of-type(193) { animation: rotation linear infinite reverse; animation-delay: -44192ms; animation-duration: 64380ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(193) .flip_rotate { transform: rotateX(36deg); } .rotate:nth-of-type(193) .flip_pos { transform: translateY(368px); } .rotate:nth-of-type(193) .flip { left: calc(30% + 493px); } .rotate:nth-of-type(194) { animation: rotation linear infinite reverse; animation-delay: -46549ms; animation-duration: 44935ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(194) .flip_rotate { transform: rotateX(24deg); } .rotate:nth-of-type(194) .flip_pos { transform: translateY(354px); } .rotate:nth-of-type(194) .flip { left: calc(30% + 286px); } .rotate:nth-of-type(195) { animation: rotation linear infinite reverse; animation-delay: -40008ms; animation-duration: 64186ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(195) .flip_rotate { transform: rotateX(15deg); } .rotate:nth-of-type(195) .flip_pos { transform: translateY(196px); } .rotate:nth-of-type(195) .flip { left: calc(30% + 237px); } .rotate:nth-of-type(196) { animation: rotation linear infinite reverse; animation-delay: -45390ms; animation-duration: 25013ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(196) .flip_rotate { transform: rotateX(24deg); } .rotate:nth-of-type(196) .flip_pos { transform: translateY(215px); } .rotate:nth-of-type(196) .flip { left: calc(30% + 210px); } .rotate:nth-of-type(197) { animation: rotation linear infinite reverse; animation-delay: -40654ms; animation-duration: 49914ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(197) .flip_rotate { transform: rotateX(35deg); } .rotate:nth-of-type(197) .flip_pos { transform: translateY(275px); } .rotate:nth-of-type(197) .flip { left: calc(30% + 250px); } .rotate:nth-of-type(198) { animation: rotation linear infinite reverse; animation-delay: -41757ms; animation-duration: 22507ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(198) .flip_rotate { transform: rotateX(18deg); } .rotate:nth-of-type(198) .flip_pos { transform: translateY(200px); } .rotate:nth-of-type(198) .flip { left: calc(30% + 222px); } .rotate:nth-of-type(199) { animation: rotation linear infinite reverse; animation-delay: -48408ms; animation-duration: 48233ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(199) .flip_rotate { transform: rotateX(20deg); } .rotate:nth-of-type(199) .flip_pos { transform: translateY(275px); } .rotate:nth-of-type(199) .flip { left: calc(30% + 468px); } .rotate:nth-of-type(200) { animation: rotation linear infinite reverse; animation-delay: -44253ms; animation-duration: 35884ms; } @keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .rotate:nth-of-type(200) .flip_rotate { transform: rotateX(11deg); } .rotate:nth-of-type(200) .flip_pos { transform: translateY(338px); } .rotate:nth-of-type(200) .flip { left: calc(30% + 254px); } .rotate:nth-of-type(1) .flip { background-color: #f9f2ee; box-shadow: 0px 0px 10px 1px #f9f2ee; animation: rotate01 3048ms infinite; } @keyframes rotate01 { 0% { transform: scale3d(0.5, 0.5, 0.5) rotateY(0); opacity: 0.8; } 25% { opacity: 0.6; } 50% { transform: scale3d(0.5, 0.5, 0.5) rotateY(180deg); opacity: 0.8; } 100% { transform: scale3d(0.5, 0.5, 0.5) rotateY(180deg); opacity: 0.6; } } .rotate:nth-of-type(2) .flip { background-color: #f9f2ee; box-shadow: 0px 0px 10px 1px #f9f2ee; animation: rotate01 16671ms infinite; } @keyframes rotate01 { 0% { transform: scale3d(0.5, 0.5, 0.5) rotateY(0); opacity: 0.8; } 25% { opacity: 0.6; } 50% { transform: scale3d(0.5, 0.5, 0.5) rotateY(180deg); opacity: 0.8; } 100% { transform: scale3d(0.5, 0.5, 0.5) rotateY(180deg); opacity: 0.6; } } .rotate:nth-of-type(3) .flip { background-color: #f9f2ee; box-shadow: 0px 0px 10px 1px #f9f2ee; animation: rotate01 4361ms infinite; } @keyframes rotate01 { 0% { transform: scale3d(0.5, 0.5, 0.5) rotateY(0); opacity: 0.8; } 25% { opacity: 0.6; } 50% { transform: scale3d(0.5, 0.5, 0.5) rotateY(180deg); opacity: 0.8; } 100% { transform: scale3d(0.5, 0.5, 0.5) rotateY(180deg); opacity: 0.6; } } .rotate:nth-of-type(4) .flip { background-color: #f9f2ee; box-shadow: 0px 0px 10px 1px #f9f2ee; animation: rotate01 23162ms infinite; } @keyframes rotate01 { 0% { transform: scale3d(0.5, 0.5, 0.5) rotateY(0); opacity: 0.8; } 25% { opacity: 0.6; } 50% { transform: scale3d(0.5, 0.5, 0.5) rotateY(180deg); opacity: 0.8; } 100% { transform: scale3d(0.5, 0.5, 0.5) rotateY(180deg); opacity: 0.6; } } .rotate:nth-of-type(5) .flip { background-color: #f9f2ee; box-shadow: 0px 0px 10px 1px #f9f2ee; animation: rotate01 23218ms infinite; } @keyframes rotate01 { 0% { transform: scale3d(0.5, 0.5, 0.5) rotateY(0); opacity: 0.8; } 25% { opacity: 0.6; } 50% { transform: scale3d(0.5, 0.5, 0.5) rotateY(180deg); opacity: 0.8; } 100% { transform: scale3d(0.5, 0.5, 0.5) rotateY(180deg); opacity: 0.6; } } .rotate:nth-of-type(6) .flip { background-color: #f9f2ee; box-shadow: 0px 0px 10px 1px #f9f2ee; animation: rotate01 19218ms infinite; } @keyframes rotate01 { 0% { transform: scale3d(0.5, 0.5, 0.5) rotateY(0); opacity: 0.8; } 25% { opacity: 0.6; } 50% { transform: scale3d(0.5, 0.5, 0.5) rotateY(180deg); opacity: 0.8; } 100% { transform: scale3d(0.5, 0.5, 0.5) rotateY(180deg); opacity: 0.6; } } .rotate:nth-of-type(7) .flip { background-color: #f9f2ee; box-shadow: 0px 0px 10px 1px #f9f2ee; animation: rotate01 18649ms infinite; } @keyframes rotate01 { 0% { transform: scale3d(0.5, 0.5, 0.5) rotateY(0); opacity: 0.8; } 25% { opacity: 0.6; } 50% { transform: scale3d(0.5, 0.5, 0.5) rotateY(180deg); opacity: 0.8; } 100% { transform: scale3d(0.5, 0.5, 0.5) rotateY(180deg); opacity: 0.6; } } .rotate:nth-of-type(8) .flip { background-color: #f9f2ee; box-shadow: 0px 0px 10px 1px #f9f2ee; animation: rotate01 15664ms infinite; } @keyframes rotate01 { 0% { transform: scale3d(0.5, 0.5, 0.5) rotateY(0); opacity: 0.8; } 25% { opacity: 0.6; } 50% { transform: scale3d(0.5, 0.5, 0.5) rotateY(180deg); opacity: 0.8; } 100% { transform: scale3d(0.5, 0.5, 0.5) rotateY(180deg); opacity: 0.6; } } .rotate:nth-of-type(9) .flip { background-color: #f9f2ee; box-shadow: 0px 0px 10px 1px #f9f2ee; animation: rotate01 27543ms infinite; } @keyframes rotate01 { 0% { transform: scale3d(0.5, 0.5, 0.5) rotateY(0); opacity: 0.8; } 25% { opacity: 0.6; } 50% { transform: scale3d(0.5, 0.5, 0.5) rotateY(180deg); opacity: 0.8; } 100% { transform: scale3d(0.5, 0.5, 0.5) rotateY(180deg); opacity: 0.6; } } .rotate:nth-of-type(10) .flip { background-color: #f9f2ee; box-shadow: 0px 0px 10px 1px #f9f2ee; animation: rotate01 24748ms infinite; } @keyframes rotate01 { 0% { transform: scale3d(0.5, 0.5, 0.5) rotateY(0); opacity: 0.8; } 25% { opacity: 0.6; } 50% { transform: scale3d(0.5, 0.5, 0.5) rotateY(180deg); opacity: 0.8; } 100% { transform: scale3d(0.5, 0.5, 0.5) rotateY(180deg); opacity: 0.6; } } .rotate:nth-of-type(11) .flip { background-color: #f9f2ee; box-shadow: 0px 0px 10px 1px #f9f2ee; animation: rotate01 27562ms infinite; } @keyframes rotate01 { 0% { transform: scale3d(0.5, 0.5, 0.5) rotateY(0); opacity: 0.8; } 25% { opacity: 0.6; } 50% { transform: scale3d(0.5, 0.5, 0.5) rotateY(180deg); opacity: 0.8; } 100% { transform: scale3d(0.5, 0.5, 0.5) rotateY(180deg); opacity: 0.6; } } .rotate:nth-of-type(12) .flip { background-color: #f9f2ee; box-shadow: 0px 0px 10px 1px #f9f2ee; animation: rotate01 23901ms infinite; } @keyframes rotate01 { 0% { transform: scale3d(0.5, 0.5, 0.5) rotateY(0); opacity: 0.8; } 25% { opacity: 0.6; } 50% { transform: scale3d(0.5, 0.5, 0.5) rotateY(180deg); opacity: 0.8; } 100% { transform: scale3d(0.5, 0.5, 0.5) rotateY(180deg); opacity: 0.6; } } .rotate:nth-of-type(13) .flip { background-color: #f9f2ee; box-shadow: 0px 0px 10px 1px #f9f2ee; animation: rotate01 20253ms infinite; } @keyframes rotate01 { 0% { transform: scale3d(0.5, 0.5, 0.5) rotateY(0); opacity: 0.8; } 25% { opacity: 0.6; } 50% { transform: scale3d(0.5, 0.5, 0.5) rotateY(180deg); opacity: 0.8; } 100% { transform: scale3d(0.5, 0.5, 0.5) rotateY(180deg); opacity: 0.6; } } .rotate:nth-of-type(14) .flip { background-color: #f9f2ee; box-shadow: 0px 0px 10px 1px #f9f2ee; animation: rotate01 7338ms infinite; } @keyframes rotate01 { 0% { transform: scale3d(0.5, 0.5, 0.5) rotateY(0); opacity: 0.8; } 25% { opacity: 0.6; } 50% { transform: scale3d(0.5, 0.5, 0.5) rotateY(180deg); opacity: 0.8; } 100% { transform: scale3d(0.5, 0.5, 0.5) rotateY(180deg); opacity: 0.6; } } .rotate:nth-of-type(15) .flip { background-color: #f9f2ee; box-shadow: 0px 0px 10px 1px #f9f2ee; animation: rotate01 31040ms infinite; } @keyframes rotate01 { 0% { transform: scale3d(0.5, 0.5, 0.5) rotateY(0); opacity: 0.8; } 25% { opacity: 0.6; } 50% { transform: scale3d(0.5, 0.5, 0.5) rotateY(180deg); opacity: 0.8; } 100% { transform: scale3d(0.5, 0.5, 0.5) rotateY(180deg); opacity: 0.6; } } .rotate:nth-of-type(16) .flip { background-color: #f9f2ee; box-shadow: 0px 0px 10px 1px #f9f2ee; animation: rotate01 24821ms infinite; } @keyframes rotate01 { 0% { transform: scale3d(0.5, 0.5, 0.5) rotateY(0); opacity: 0.8; } 25% { opacity: 0.6; } 50% { transform: scale3d(0.5, 0.5, 0.5) rotateY(180deg); opacity: 0.8; } 100% { transform: scale3d(0.5, 0.5, 0.5) rotateY(180deg); opacity: 0.6; } } .rotate:nth-of-type(17) .flip { background-color: #f9f2ee; box-shadow: 0px 0px 10px 1px #f9f2ee; animation: rotate01 16546ms infinite; } @keyframes rotate01 { 0% { transform: scale3d(0.5, 0.5, 0.5) rotateY(0); opacity: 0.8; } 25% { opacity: 0.6; } 50% { transform: scale3d(0.5, 0.5, 0.5) rotateY(180deg); opacity: 0.8; } 100% { transform: scale3d(0.5, 0.5, 0.5) rotateY(180deg); opacity: 0.6; } } .rotate:nth-of-type(18) .flip { background-color: #f9f2ee; box-shadow: 0px 0px 10px 1px #f9f2ee; animation: rotate01 21452ms infinite; } @keyframes rotate01 { 0% { transform: scale3d(0.5, 0.5, 0.5) rotateY(0); opacity: 0.8; } 25% { opacity: 0.6; } 50% { transform: scale3d(0.5, 0.5, 0.5) rotateY(180deg); opacity: 0.8; } 100% { transform: scale3d(0.5, 0.5, 0.5) rotateY(180deg); opacity: 0.6; } } .rotate:nth-of-type(19) .flip { background-color: #f9f2ee; box-shadow: 0px 0px 10px 1px #f9f2ee; animation: rotate01 12396ms infinite; } @keyframes rotate01 { 0% { transform: scale3d(0.5, 0.5, 0.5) rotateY(0); opacity: 0.8; } 25% { opacity: 0.6; } 50% { transform: scale3d(0.5, 0.5, 0.5) rotateY(180deg); opacity: 0.8; } 100% { transform: scale3d(0.5, 0.5, 0.5) rotateY(180deg); opacity: 0.6; } } .rotate:nth-of-type(20) .flip { background-color: #f9f2ee; box-shadow: 0px 0px 10px 1px #f9f2ee; animation: rotate01 18284ms infinite; } @keyframes rotate01 { 0% { transform: scale3d(0.5, 0.5, 0.5) rotateY(0); opacity: 0.8; } 25% { opacity: 0.6; } 50% { transform: scale3d(0.5, 0.5, 0.5) rotateY(180deg); opacity: 0.8; } 100% { transform: scale3d(0.5, 0.5, 0.5) rotateY(180deg); opacity: 0.6; } } .rotate:nth-of-type(21) .flip { background-color: #f9f2ee; box-shadow: 0px 0px 10px 1px #f9f2ee; animation: rotate01 32506ms infinite; } @keyframes rotate01 { 0% { transform: scale3d(0.5, 0.5, 0.5) rotateY(0); opacity: 0.8; } 25% { opacity: 0.6; } 50% { transform: scale3d(0.5, 0.5, 0.5) rotateY(180deg); opacity: 0.8; } 100% { transform: scale3d(0.5, 0.5, 0.5) rotateY(180deg); opacity: 0.6; } } .rotate:nth-of-type(22) .flip { background-color: #f9f2ee; box-shadow: 0px 0px 10px 1px #f9f2ee; animation: rotate01 7132ms infinite; } @keyframes rotate01 { 0% { transform: scale3d(0.5, 0.5, 0.5) rotateY(0); opacity: 0.8; } 25% { opacity: 0.6; } 50% { transform: scale3d(0.5, 0.5, 0.5) rotateY(180deg); opacity: 0.8; } 100% { transform: scale3d(0.5, 0.5, 0.5) rotateY(180deg); opacity: 0.6; } } .rotate:nth-of-type(23) .flip { background-color: #f9f2ee; box-shadow: 0px 0px 10px 1px #f9f2ee; animation: rotate01 20225ms infinite; } @keyframes rotate01 { 0% { transform: scale3d(0.5, 0.5, 0.5) rotateY(0); opacity: 0.8; } 25% { opacity: 0.6; } 50% { transform: scale3d(0.5, 0.5, 0.5) rotateY(180deg); opacity: 0.8; } 100% { transform: scale3d(0.5, 0.5, 0.5) rotateY(180deg); opacity: 0.6; } } .rotate:nth-of-type(24) .flip { background-color: #f9f2ee; box-shadow: 0px 0px 10px 1px #f9f2ee; animation: rotate01 16505ms infinite; } @keyframes rotate01 { 0% { transform: scale3d(0.5, 0.5, 0.5) rotateY(0); opacity: 0.8; } 25% { opacity: 0.6; } 50% { transform: scale3d(0.5, 0.5, 0.5) rotateY(180deg); opacity: 0.8; } 100% { transform: scale3d(0.5, 0.5, 0.5) rotateY(180deg); opacity: 0.6; } } .rotate:nth-of-type(25) .flip { background-color: #f9f2ee; box-shadow: 0px 0px 10px 1px #f9f2ee; animation: rotate01 28326ms infinite; } @keyframes rotate01 { 0% { transform: scale3d(0.5, 0.5, 0.5) rotateY(0); opacity: 0.8; } 25% { opacity: 0.6; } 50% { transform: scale3d(0.5, 0.5, 0.5) rotateY(180deg); opacity: 0.8; } 100% { transform: scale3d(0.5, 0.5, 0.5) rotateY(180deg); opacity: 0.6; } } .rotate:nth-of-type(26) .flip { background-color: #f9f2ee; box-shadow: 0px 0px 10px 1px #f9f2ee; animation: rotate01 13550ms infinite; } @keyframes rotate01 { 0% { transform: scale3d(0.5, 0.5, 0.5) rotateY(0); opacity: 0.8; } 25% { opacity: 0.6; } 50% { transform: scale3d(0.5, 0.5, 0.5) rotateY(180deg); opacity: 0.8; } 100% { transform: scale3d(0.5, 0.5, 0.5) rotateY(180deg); opacity: 0.6; } } .rotate:nth-of-type(27) .flip { background-color: #f9f2ee; box-shadow: 0px 0px 10px 1px #f9f2ee; animation: rotate01 15765ms infinite; } @keyframes rotate01 { 0% { transform: scale3d(0.5, 0.5, 0.5) rotateY(0); opacity: 0.8; } 25% { opacity: 0.6; } 50% { transform: scale3d(0.5, 0.5, 0.5) rotateY(180deg); opacity: 0.8; } 100% { transform: scale3d(0.5, 0.5, 0.5) rotateY(180deg); opacity: 0.6; } } .rotate:nth-of-type(28) .flip { background-color: #f9f2ee; box-shadow: 0px 0px 10px 1px #f9f2ee; animation: rotate01 23599ms infinite; } @keyframes rotate01 { 0% { transform: scale3d(0.5, 0.5, 0.5) rotateY(0); opacity: 0.8; } 25% { opacity: 0.6; } 50% { transform: scale3d(0.5, 0.5, 0.5) rotateY(180deg); opacity: 0.8; } 100% { transform: scale3d(0.5, 0.5, 0.5) rotateY(180deg); opacity: 0.6; } } .rotate:nth-of-type(29) .flip { background-color: #f9f2ee; box-shadow: 0px 0px 10px 1px #f9f2ee; animation: rotate01 18971ms infinite; } @keyframes rotate01 { 0% { transform: scale3d(0.5, 0.5, 0.5) rotateY(0); opacity: 0.8; } 25% { opacity: 0.6; } 50% { transform: scale3d(0.5, 0.5, 0.5) rotateY(180deg); opacity: 0.8; } 100% { transform: scale3d(0.5, 0.5, 0.5) rotateY(180deg); opacity: 0.6; } } .rotate:nth-of-type(30) .flip { background-color: #f9f2ee; box-shadow: 0px 0px 10px 1px #f9f2ee; animation: rotate01 15364ms infinite; } @keyframes rotate01 { 0% { transform: scale3d(0.5, 0.5, 0.5) rotateY(0); opacity: 0.8; } 25% { opacity: 0.6; } 50% { transform: scale3d(0.5, 0.5, 0.5) rotateY(180deg); opacity: 0.8; } 100% { transform: scale3d(0.5, 0.5, 0.5) rotateY(180deg); opacity: 0.6; } } .rotate:nth-of-type(31) .flip { background-color: #f9f2ee; box-shadow: 0px 0px 10px 1px #f9f2ee; animation: rotate01 12847ms infinite; } @keyframes rotate01 { 0% { transform: scale3d(0.5, 0.5, 0.5) rotateY(0); opacity: 0.8; } 25% { opacity: 0.6; } 50% { transform: scale3d(0.5, 0.5, 0.5) rotateY(180deg); opacity: 0.8; } 100% { transform: scale3d(0.5, 0.5, 0.5) rotateY(180deg); opacity: 0.6; } } .rotate:nth-of-type(32) .flip { background-color: #f9f2ee; box-shadow: 0px 0px 10px 1px #f9f2ee; animation: rotate01 18544ms infinite; } @keyframes rotate01 { 0% { transform: scale3d(0.5, 0.5, 0.5) rotateY(0); opacity: 0.8; } 25% { opacity: 0.6; } 50% { transform: scale3d(0.5, 0.5, 0.5) rotateY(180deg); opacity: 0.8; } 100% { transform: scale3d(0.5, 0.5, 0.5) rotateY(180deg); opacity: 0.6; } } .rotate:nth-of-type(33) .flip { background-color: #f9f2ee; box-shadow: 0px 0px 10px 1px #f9f2ee; animation: rotate01 5669ms infinite; } @keyframes rotate01 { 0% { transform: scale3d(0.5, 0.5, 0.5) rotateY(0); opacity: 0.8; } 25% { opacity: 0.6; } 50% { transform: scale3d(0.5, 0.5, 0.5) rotateY(180deg); opacity: 0.8; } 100% { transform: scale3d(0.5, 0.5, 0.5) rotateY(180deg); opacity: 0.6; } } .rotate:nth-of-type(34) .flip { background-color: #f9f2ee; box-shadow: 0px 0px 10px 1px #f9f2ee; animation: rotate01 19410ms infinite; } @keyframes rotate01 { 0% { transform: scale3d(0.5, 0.5, 0.5) rotateY(0); opacity: 0.8; } 25% { opacity: 0.6; } 50% { transform: scale3d(0.5, 0.5, 0.5) rotateY(180deg); opacity: 0.8; } 100% { transform: scale3d(0.5, 0.5, 0.5) rotateY(180deg); opacity: 0.6; } } .rotate:nth-of-type(35) .flip { background-color: #f9f2ee; box-shadow: 0px 0px 10px 1px #f9f2ee; animation: rotate01 15510ms infinite; } @keyframes rotate01 { 0% { transform: scale3d(0.5, 0.5, 0.5) rotateY(0); opacity: 0.8; } 25% { opacity: 0.6; } 50% { transform: scale3d(0.5, 0.5, 0.5) rotateY(180deg); opacity: 0.8; } 100% { transform: scale3d(0.5, 0.5, 0.5) rotateY(180deg); opacity: 0.6; } } .rotate:nth-of-type(36) .flip { background-color: #f9f2ee; box-shadow: 0px 0px 10px 1px #f9f2ee; animation: rotate01 17813ms infinite; } @keyframes rotate01 { 0% { transform: scale3d(0.5, 0.5, 0.5) rotateY(0); opacity: 0.8; } 25% { opacity: 0.6; } 50% { transform: scale3d(0.5, 0.5, 0.5) rotateY(180deg); opacity: 0.8; } 100% { transform: scale3d(0.5, 0.5, 0.5) rotateY(180deg); opacity: 0.6; } } .rotate:nth-of-type(37) .flip { background-color: #f9f2ee; box-shadow: 0px 0px 10px 1px #f9f2ee; animation: rotate01 31464ms infinite; } @keyframes rotate01 { 0% { transform: scale3d(0.5, 0.5, 0.5) rotateY(0); opacity: 0.8; } 25% { opacity: 0.6; } 50% { transform: scale3d(0.5, 0.5, 0.5) rotateY(180deg); opacity: 0.8; } 100% { transform: scale3d(0.5, 0.5, 0.5) rotateY(180deg); opacity: 0.6; } } .rotate:nth-of-type(38) .flip { background-color: #f9f2ee; box-shadow: 0px 0px 10px 1px #f9f2ee; animation: rotate01 26206ms infinite; } @keyframes rotate01 { 0% { transform: scale3d(0.5, 0.5, 0.5) rotateY(0); opacity: 0.8; } 25% { opacity: 0.6; } 50% { transform: scale3d(0.5, 0.5, 0.5) rotateY(180deg); opacity: 0.8; } 100% { transform: scale3d(0.5, 0.5, 0.5) rotateY(180deg); opacity: 0.6; } } .rotate:nth-of-type(39) .flip { background-color: #f9f2ee; box-shadow: 0px 0px 10px 1px #f9f2ee; animation: rotate01 23628ms infinite; } @keyframes rotate01 { 0% { transform: scale3d(0.5, 0.5, 0.5) rotateY(0); opacity: 0.8; } 25% { opacity: 0.6; } 50% { transform: scale3d(0.5, 0.5, 0.5) rotateY(180deg); opacity: 0.8; } 100% { transform: scale3d(0.5, 0.5, 0.5) rotateY(180deg); opacity: 0.6; } } .rotate:nth-of-type(40) .flip { background-color: #f9f2ee; box-shadow: 0px 0px 10px 1px #f9f2ee; animation: rotate01 6634ms infinite; } @keyframes rotate01 { 0% { transform: scale3d(0.5, 0.5, 0.5) rotateY(0); opacity: 0.8; } 25% { opacity: 0.6; } 50% { transform: scale3d(0.5, 0.5, 0.5) rotateY(180deg); opacity: 0.8; } 100% { transform: scale3d(0.5, 0.5, 0.5) rotateY(180deg); opacity: 0.6; } } .rotate:nth-of-type(41) .flip.........完整代码请登录后点击上方下载按钮下载查看
网友评论0