Regular polygons morphing

In this example below you will see how to do a Regular polygons morphing with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by Mihnutzen, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Mihnutzen ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Regular polygons morphing</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="za-poligons-scene">
  <div class="poligon-cnt">
    <div class="poligon">
      <div class="sides4"></div>
      <div class="sides4"></div>
      <div class="sides4"></div>
      <div class="sides4"></div>
      <div class="sides4"></div>
      <div class="sides4"></div>
      <div class="sides4"></div>
      <div class="sides4"></div>
      <div class="sides4"></div>
      <div class="sides4"></div>
      <div class="sides4"></div>
      <div class="sides4"></div>
      <div class="sides4"></div>
      <div class="sides4"></div>
      <div class="sides4"></div>
    </div>
  </div>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/Mihnutzen/regular-polygons-morphing-yywJaB */
body {
  background: #FFF;
}

*,
*:after,
*:before {
  box-sizing: border-box;
}

.za-poligons-scene {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  -webkit-perspective: 2000px;
          perspective: 2000px;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
.za-poligons-scene * {
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
.za-poligons-scene:after {
  display: block;
  content: '';
  width: 200%;
  height: 200%;
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: #FEFEFE;
  background-size: 58px 58px;
  background-position: 0px 2px, 4px 35px, 29px 31px, 33px 6px, 0px 36px, 4px 2px, 29px 6px, 33px 30px;
  background-image: linear-gradient(335deg, #93b9c9 23px, rgba(0, 0, 0, 0) 23px), linear-gradient(155deg, #93b9c9 23px, rgba(0, 0, 0, 0) 23px), linear-gradient(335deg, #93b9c9 23px, rgba(0, 0, 0, 0) 23px), linear-gradient(155deg, #93b9c9 23px, rgba(0, 0, 0, 0) 23px), linear-gradient(335deg, #93b9c9 10px, rgba(0, 0, 0, 0) 10px), linear-gradient(155deg, #93b9c9 10px, rgba(0, 0, 0, 0) 10px), linear-gradient(335deg, #93b9c9 10px, rgba(0, 0, 0, 0) 10px), linear-gradient(155deg, #93b9c9 10px, rgba(0, 0, 0, 0) 10px);
  -webkit-transform: translateX(-50%) translateY(-40%) translateZ(-200px) rotateX(65deg) rotate(-30deg);
          transform: translateX(-50%) translateY(-40%) translateZ(-200px) rotateX(65deg) rotate(-30deg);
}

.poligon-cnt {
  width: 500px;
  height: 500px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -250px;
  margin-top: -250px;
  z-index: 11;
  -webkit-perspective: 2000px;
          perspective: 2000px;
  -webkit-animation: panePoligons 5s infinite;
          animation: panePoligons 5s infinite;
}

.poligon {
  width: 500px;
  height: 500px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -250px;
  margin-top: -250px;
  -webkit-animation: spinPoligons 15s infinite ease-in-out;
          animation: spinPoligons 15s infinite ease-in-out;
}

.poligon div {
  width: 50px;
  height: 1px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -25px;
  margin-top: -0.5px;
  transition: all 600ms linear;
}
.poligon div:after {
  display: block;
  content: '';
  width: 50px;
  height: 20px;
  background: red;
  -webkit-transform-origin: top center;
          transform-origin: top center;
  -webkit-transform: rotateX(90deg);
          transform: rotateX(90deg);
  border: 1px solid #000;
}

.sides3:nth-child(1) {
  -webkit-transform: rotate(120deg) translateY(14.43376px) !important;
          transform: rotate(120deg) translateY(14.43376px) !important;
}

.sides3:nth-child(2) {
  -webkit-transform: rotate(240deg) translateY(14.43376px) !important;
          transform: rotate(240deg) translateY(14.43376px) !important;
}

.sides3:nth-child(3) {
  -webkit-transform: rotate(360deg) translateY(14.43376px) !important;
          transform: rotate(360deg) translateY(14.43376px) !important;
}

.sides4:nth-child(1) {
  -webkit-transform: rotate(90deg) translateY(25px) !important;
          transform: rotate(90deg) translateY(25px) !important;
}

.sides4:nth-child(2) {
  -webkit-transform: rotate(180deg) translateY(25px) !important;
          transform: rotate(180deg) translateY(25px) !important;
}

.sides4:nth-child(3) {
  -webkit-transform: rotate(270deg) translateY(25px) !important;
          transform: rotate(270deg) translateY(25px) !important;
}

.sides4:nth-child(4) {
  -webkit-transform: rotate(360deg) translateY(25px) !important;
          transform: rotate(360deg) translateY(25px) !important;
}

.sides5:nth-child(1) {
  -webkit-transform: rotate(72deg) translateY(34.40955px) !important;
          transform: rotate(72deg) translateY(34.40955px) !important;
}

.sides5:nth-child(2) {
  -webkit-transform: rotate(144deg) translateY(34.40955px) !important;
          transform: rotate(144deg) translateY(34.40955px) !important;
}

.sides5:nth-child(3) {
  -webkit-transform: rotate(216deg) translateY(34.40955px) !important;
          transform: rotate(216deg) translateY(34.40955px) !important;
}

.sides5:nth-child(4) {
  -webkit-transform: rotate(288deg) translateY(34.40955px) !important;
          transform: rotate(288deg) translateY(34.40955px) !important;
}

.sides5:nth-child(5) {
  -webkit-transform: rotate(360deg) translateY(34.40955px) !important;
          transform: rotate(360deg) translateY(34.40955px) !important;
}

.sides6:nth-child(1) {
  -webkit-transform: rotate(60deg) translateY(43.30127px) !important;
          transform: rotate(60deg) translateY(43.30127px) !important;
}

.sides6:nth-child(2) {
  -webkit-transform: rotate(120deg) translateY(43.30127px) !important;
          transform: rotate(120deg) translateY(43.30127px) !important;
}

.sides6:nth-child(3) {
  -webkit-transform: rotate(180deg) translateY(43.30127px) !important;
          transform: rotate(180deg) translateY(43.30127px) !important;
}

.sides6:nth-child(4) {
  -webkit-transform: rotate(240deg) translateY(43.30127px) !important;
          transform: rotate(240deg) translateY(43.30127px) !important;
}

.sides6:nth-child(5) {
  -webkit-transform: rotate(300deg) translateY(43.30127px) !important;
          transform: rotate(300deg) translateY(43.30127px) !important;
}

.sides6:nth-child(6) {
  -webkit-transform: rotate(360deg) translateY(43.30127px) !important;
          transform: rotate(360deg) translateY(43.30127px) !important;
}

.sides7:nth-child(1) {
  -webkit-transform: rotate(51.42857deg) translateY(51.91303px) !important;
          transform: rotate(51.42857deg) translateY(51.91303px) !important;
}

.sides7:nth-child(2) {
  -webkit-transform: rotate(102.85714deg) translateY(51.91303px) !important;
          transform: rotate(102.85714deg) translateY(51.91303px) !important;
}

.sides7:nth-child(3) {
  -webkit-transform: rotate(154.28571deg) translateY(51.91303px) !important;
          transform: rotate(154.28571deg) translateY(51.91303px) !important;
}

.sides7:nth-child(4) {
  -webkit-transform: rotate(205.71429deg) translateY(51.91303px) !important;
          transform: rotate(205.71429deg) translateY(51.91303px) !important;
}

.sides7:nth-child(5) {
  -webkit-transform: rotate(257.14286deg) translateY(51.91303px) !important;
          transform: rotate(257.14286deg) translateY(51.91303px) !important;
}

.sides7:nth-child(6) {
  -webkit-transform: rotate(308.57143deg) translateY(51.91303px) !important;
          transform: rotate(308.57143deg) translateY(51.91303px) !important;
}

.sides7:nth-child(7) {
  -webkit-transform: rotate(360deg) translateY(51.91303px) !important;
          transform: rotate(360deg) translateY(51.91303px) !important;
}

.sides8:nth-child(1) {
  -webkit-transform: rotate(45deg) translateY(60.35534px) !important;
          transform: rotate(45deg) translateY(60.35534px) !important;
}

.sides8:nth-child(2) {
  -webkit-transform: rotate(90deg) translateY(60.35534px) !important;
          transform: rotate(90deg) translateY(60.35534px) !important;
}

.sides8:nth-child(3) {
  -webkit-transform: rotate(135deg) translateY(60.35534px) !important;
          transform: rotate(135deg) translateY(60.35534px) !important;
}

.sides8:nth-child(4) {
  -webkit-transform: rotate(180deg) translateY(60.35534px) !important;
          transform: rotate(180deg) translateY(60.35534px) !important;
}

.sides8:nth-child(5) {
  -webkit-transform: rotate(225deg) translateY(60.35534px) !important;
          transform: rotate(225deg) translateY(60.35534px) !important;
}

.sides8:nth-child(6) {
  -webkit-transform: rotate(270deg) translateY(60.35534px) !important;
          transform: rotate(270deg) translateY(60.35534px) !important;
}

.sides8:nth-child(7) {
  -webkit-transform: rotate(315deg) translateY(60.35534px) !important;
          transform: rotate(315deg) translateY(60.35534px) !important;
}

.sides8:nth-child(8) {
  -webkit-transform: rotate(360deg) translateY(60.35534px) !important;
          transform: rotate(360deg) translateY(60.35534px) !important;
}

.sides9:nth-child(1) {
  -webkit-transform: rotate(40deg) translateY(68.68694px) !important;
          transform: rotate(40deg) translateY(68.68694px) !important;
}

.sides9:nth-child(2) {
  -webkit-transform: rotate(80deg) translateY(68.68694px) !important;
          transform: rotate(80deg) translateY(68.68694px) !important;
}

.sides9:nth-child(3) {
  -webkit-transform: rotate(120deg) translateY(68.68694px) !important;
          transform: rotate(120deg) translateY(68.68694px) !important;
}

.sides9:nth-child(4) {
  -webkit-transform: rotate(160deg) translateY(68.68694px) !important;
          transform: rotate(160deg) translateY(68.68694px) !important;
}

.sides9:nth-child(5) {
  -webkit-transform: rotate(200deg) translateY(68.68694px) !important;
          transform: rotate(200deg) translateY(68.68694px) !important;
}

.sides9:nth-child(6) {
  -webkit-transform: rotate(240deg) translateY(68.68694px) !important;
          transform: rotate(240deg) translateY(68.68694px) !important;
}

.sides9:nth-child(7) {
  -webkit-transform: rotate(280deg) translateY(68.68694px) !important;
          transform: rotate(280deg) translateY(68.68694px) !important;
}

.sides9:nth-child(8) {
  -webkit-transform: rotate(320deg) translateY(68.68694px) !important;
          transform: rotate(320deg) translateY(68.68694px) !important;
}

.sides9:nth-child(9) {
  -webkit-transform: rotate(360deg) translateY(68.68694px) !important;
          transform: rotate(360deg) translateY(68.68694px) !important;
}

.sides10:nth-child(1) {
  -webkit-transform: rotate(36deg) translateY(76.94209px) !important;
          transform: rotate(36deg) translateY(76.94209px) !important;
}

.sides10:nth-child(2) {
  -webkit-transform: rotate(72deg) translateY(76.94209px) !important;
          transform: rotate(72deg) translateY(76.94209px) !important;
}

.sides10:nth-child(3) {
  -webkit-transform: rotate(108deg) translateY(76.94209px) !important;
          transform: rotate(108deg) translateY(76.94209px) !important;
}

.sides10:nth-child(4) {
  -webkit-transform: rotate(144deg) translateY(76.94209px) !important;
          transform: rotate(144deg) translateY(76.94209px) !important;
}

.sides10:nth-child(5) {
  -webkit-transform: rotate(180deg) translateY(76.94209px) !important;
          transform: rotate(180deg) translateY(76.94209px) !important;
}

.sides10:nth-child(6) {
  -webkit-transform: rotate(216deg) translateY(76.94209px) !important;
          transform: rotate(216deg) translateY(76.94209px) !important;
}

.sides10:nth-child(7) {
  -webkit-transform: rotate(252deg) translateY(76.94209px) !important;
          transform: rotate(252deg) translateY(76.94209px) !important;
}

.sides10:nth-child(8) {
  -webkit-transform: rotate(288deg) translateY(76.94209px) !important;
          transform: rotate(288deg) translateY(76.94209px) !important;
}

.sides10:nth-child(9) {
  -webkit-transform: rotate(324deg) translateY(76.94209px) !important;
          transform: rotate(324deg) translateY(76.94209px) !important;
}

.sides10:nth-child(10) {
  -webkit-transform: rotate(360deg) translateY(76.94209px) !important;
          transform: rotate(360deg) translateY(76.94209px) !important;
}

.sides11:nth-child(1) {
  -webkit-transform: rotate(32.72727deg) translateY(85.14218px) !important;
          transform: rotate(32.72727deg) translateY(85.14218px) !important;
}

.sides11:nth-child(2) {
  -webkit-transform: rotate(65.45455deg) translateY(85.14218px) !important;
          transform: rotate(65.45455deg) translateY(85.14218px) !important;
}

.sides11:nth-child(3) {
  -webkit-transform: rotate(98.18182deg) translateY(85.14218px) !important;
          transform: rotate(98.18182deg) translateY(85.14218px) !important;
}

.sides11:nth-child(4) {
  -webkit-transform: rotate(130.90909deg) translateY(85.14218px) !important;
          transform: rotate(130.90909deg) translateY(85.14218px) !important;
}

.sides11:nth-child(5) {
  -webkit-transform: rotate(163.63636deg) translateY(85.14218px) !important;
          transform: rotate(163.63636deg) translateY(85.14218px) !important;
}

.sides11:nth-child(6) {
  -webkit-transform: rotate(196.36364deg) translateY(85.14218px) !important;
          transform: rotate(196.36364deg) translateY(85.14218px) !important;
}

.sides11:nth-child(7) {
  -webkit-transform: rotate(229.09091deg) translateY(85.14218px) !important;
          transform: rotate(229.09091deg) translateY(85.14218px) !important;
}

.sides11:nth-child(8) {
  -webkit-transform: rotate(261.81818deg) translateY(85.14218px) !important;
          transform: rotate(261.81818deg) translateY(85.14218px) !important;
}

.sides11:nth-child(9) {
  -webkit-transform: rotate(294.54545deg) translateY(85.14218px) !important;
          transform: rotate(294.54545deg) translateY(85.14218px) !important;
}

.sides11:nth-child(10) {
  -webkit-transform: rotate(327.27273deg) translateY(85.14218px) !important;
          transform: rotate(327.27273deg) translateY(85.14218px) !important;
}

.sides11:nth-child(11) {
  -webkit-transform: rotate(360deg) translateY(85.14218px) !important;
          transform: rotate(360deg) translateY(85.14218px) !important;
}

.sides12:nth-child(1) {
  -webkit-transform: rotate(30deg) translateY(93.30127px) !important;
          transform: rotate(30deg) translateY(93.30127px) !important;
}

.sides12:nth-child(2) {
  -webkit-transform: rotate(60deg) translateY(93.30127px) !important;
          transform: rotate(60deg) translateY(93.30127px) !important;
}

.sides12:nth-child(3) {
  -webkit-transform: rotate(90deg) translateY(93.30127px) !important;
          transform: rotate(90deg) translateY(93.30127px) !important;
}

.sides12:nth-child(4) {
  -webkit-transform: rotate(120deg) translateY(93.30127px) !important;
          transform: rotate(120deg) translateY(93.30127px) !important;
}

.sides12:nth-child(5) {
  -webkit-transform: rotate(150deg) translateY(93.30127px) !important;
          transform: rotate(150deg) translateY(93.30127px) !important;
}

.sides12:nth-child(6) {
  -webkit-transform: rotate(180deg) translateY(93.30127px) !important;
          transform: rotate(180deg) translateY(93.30127px) !important;
}

.sides12:nth-child(7) {
  -webkit-transform: rotate(210deg) translateY(93.30127px) !important;
          transform: rotate(210deg) translateY(93.30127px) !important;
}

.sides12:nth-child(8) {
  -webkit-transform: rotate(240deg) translateY(93.30127px) !important;
          transform: rotate(240deg) translateY(93.30127px) !important;
}

.sides12:nth-child(9) {
  -webkit-transform: rotate(270deg) translateY(93.30127px) !important;
          transform: rotate(270deg) translateY(93.30127px) !important;
}

.sides12:nth-child(10) {
  -webkit-transform: rotate(300deg) translateY(93.30127px) !important;
          transform: rotate(300deg) translateY(93.30127px) !important;
}

.sides12:nth-child(11) {
  -webkit-transform: rotate(330deg) translateY(93.30127px) !important;
          transform: rotate(330deg) translateY(93.30127px) !important;
}

.sides12:nth-child(12) {
  -webkit-transform: rotate(360deg) translateY(93.30127px) !important;
          transform: rotate(360deg) translateY(93.30127px) !important;
}

.sides13:nth-child(1) {
  -webkit-transform: rotate(27.69231deg) translateY(101.42899px) !important;
          transform: rotate(27.69231deg) translateY(101.42899px) !important;
}

.sides13:nth-child(2) {
  -webkit-transform: rotate(55.38462deg) translateY(101.42899px) !important;
          transform: rotate(55.38462deg) translateY(101.42899px) !important;
}

.sides13:nth-child(3) {
  -webkit-transform: rotate(83.07692deg) translateY(101.42899px) !important;
          transform: rotate(83.07692deg) translateY(101.42899px) !important;
}

.sides13:nth-child(4) {
  -webkit-transform: rotate(110.76923deg) translateY(101.42899px) !important;
          transform: rotate(110.76923deg) translateY(101.42899px) !important;
}

.sides13:nth-child(5) {
  -webkit-transform: rotate(138.46154deg) translateY(101.42899px) !important;
          transform: rotate(138.46154deg) translateY(101.42899px) !important;
}

.sides13:nth-child(6) {
  -webkit-transform: rotate(166.15385deg) translateY(101.42899px) !important;
          transform: rotate(166.15385deg) translateY(101.42899px) !important;
}

.sides13:nth-child(7) {
  -webkit-transform: rotate(193.84615deg) translateY(101.42899px) !important;
          transform: rotate(193.84615deg) translateY(101.42899px) !important;
}

.sides13:nth-child(8) {
  -webkit-transform: rotate(221.53846deg) translateY(101.42899px) !important;
          transform: rotate(221.53846deg) translateY(101.42899px) !important;
}

.sides13:nth-child(9) {
  -webkit-transform: rotate(249.23077deg) translateY(101.42899px) !important;
          transform: rotate(249.23077deg) translateY(101.42899px) !important;
}

.sides13:nth-child(10) {
  -webkit-transform: rotate(276.92308deg) translateY(101.42899px) !important;
          transform: rotate(276.92308deg) translateY(101.42899px) !important;
}

.sides13:nth-child(11) {
  -webkit-transform: rotate(304.61538deg) translateY(101.42899px) !important;
          transform: rotate(304.61538deg) translateY(101.42899px) !important;
}

.sides13:nth-child(12) {
  -webkit-transform: rotate(332.30769deg) translateY(101.42899px) !important;
          transform: rotate(332.30769deg) translateY(101.42899px) !important;
}

.sides13:nth-child(13) {
  -webkit-transform: rotate(360deg) translateY(101.42899px) !important;
          transform: rotate(360deg) translateY(101.42899px) !important;
}

.sides14:nth-child(1) {
  -webkit-transform: rotate(25.71429deg) translateY(109.53216px) !important;
          transform: rotate(25.71429deg) translateY(109.53216px) !important;
}

.sides14:nth-child(2) {
  -webkit-transform: rotate(51.42857deg) translateY(109.53216px) !important;
          transform: rotate(51.42857deg) translateY(109.53216px) !important;
}

.sides14:nth-child(3) {
  -webkit-transform: rotate(77.14286deg) translateY(109.53216px) !important;
          transform: rotate(77.14286deg) translateY(109.53216px) !important;
}

.sides14:nth-child(4) {
  -webkit-transform: rotate(102.85714deg) translateY(109.53216px) !important;
          transform: rotate(102.85714deg) translateY(109.53216px) !important;
}

.sides14:nth-child(5) {
  -webkit-transform: rotate(128.57143deg) translateY(109.53216px) !important;
          transform: rotate(128.57143deg) translateY(109.53216px) !important;
}

.sides14:nth-child(6) {
  -webkit-transform: rotate(154.28571deg) translateY(109.53216px) !important;
          transform: rotate(154.28571deg) translateY(109.53216px) !important;
}

.sides14:nth-child(7) {
  -webkit-transform: rotate(180deg) translateY(109.53216px) !important;
          transform: rotate(180deg) translateY(109.53216px) !important;
}

.sides14:nth-child(8) {
  -webkit-transform: rotate(205.71429deg) translateY(109.53216px) !important;
          transform: rotate(205.71429deg) translateY(109.53216px) !important;
}

.sides14:nth-child(9) {
  -webkit-transform: rotate(231.42857deg) translateY(109.53216px) !important;
          transform: rotate(231.42857deg) translateY(109.53216px) !important;
}

.sides14:nth-child(10) {
  -webkit-transform: rotate(257.14286deg) translateY(109.53216px) !important;
          transform: rotate(257.14286deg) translateY(109.53216px) !important;
}

.sides14:nth-child(11) {
  -webkit-transform: rotate(282.85714deg) translateY(109.53216px) !important;
          transform: rotate(282.85714deg) translateY(109.53216px) !important;
}

.sides14:nth-child(12) {
  -webkit-transform: rotate(308.57143deg) translateY(109.53216px) !important;
          transform: rotate(308.57143deg) translateY(109.53216px) !important;
}

.sides14:nth-child(13) {
  -webkit-transform: rotate(334.28571deg) translateY(109.53216px) !important;
          transform: rotate(334.28571deg) translateY(109.53216px) !important;
}

.sides14:nth-child(14) {
  -webkit-transform: rotate(360deg) translateY(109.53216px) !important;
          transform: rotate(360deg) translateY(109.53216px) !important;
}

.sides15:nth-child(1) {
  -webkit-transform: rotate(24deg) translateY(117.61575px) !important;
          transform: rotate(24deg) translateY(117.61575px) !important;
}

.sides15:nth-child(2) {
  -webkit-transform: rotate(48deg) translateY(117.61575px) !important;
          transform: rotate(48deg) translateY(117.61575px) !important;
}

.sides15:nth-child(3) {
  -webkit-transform: rotate(72deg) translateY(117.61575px) !important;
          transform: rotate(72deg) translateY(117.61575px) !important;
}

.sides15:nth-child(4) {
  -webkit-transform: rotate(96deg) translateY(117.61575px) !important;
          transform: rotate(96deg) translateY(117.61575px) !important;
}

.sides15:nth-child(5) {
  -webkit-transform: rotate(120deg) translateY(117.61575px) !important;
          transform: rotate(120deg) translateY(117.61575px) !important;
}

.sides15:nth-child(6) {
  -webkit-transform: rotate(144deg) translateY(117.61575px) !important;
          transform: rotate(144deg) translateY(117.61575px) !important;
}

.sides15:nth-child(7) {
  -webkit-transform: rotate(168deg) translateY(117.61575px) !important;
          transform: rotate(168deg) translateY(117.61575px) !important;
}

.sides15:nth-child(8) {
  -webkit-transform: rotate(192deg) translateY(117.61575px) !important;
          transform: rotate(192deg) translateY(117.61575px) !important;
}

.sides15:nth-child(9) {
  -webkit-transform: rotate(216deg) translateY(117.61575px) !important;
          transform: rotate(216deg) translateY(117.61575px) !important;
}

.sides15:nth-child(10) {
  -webkit-transform: rotate(240deg) translateY(117.61575px) !important;
          transform: rotate(240deg) translateY(117.61575px) !important;
}

.sides15:nth-child(11) {
  -webkit-transform: rotate(264deg) translateY(117.61575px) !important;
          transform: rotate(264deg) translateY(117.61575px) !important;
}

.sides15:nth-child(12) {
  -webkit-transform: rotate(288deg) translateY(117.61575px) !important;
          transform: rotate(288deg) translateY(117.61575px) !important;
}

.sides15:nth-child(13) {
  -webkit-transform: rotate(312deg) translateY(117.61575px) !important;
          transform: rotate(312deg) translateY(117.61575px) !important;
}

.sides15:nth-child(14) {
  -webkit-transform: rotate(336deg) translateY(117.61575px) !important;
          transform: rotate(336deg) translateY(117.61575px) !important;
}

.sides15:nth-child(15) {
  -webkit-transform: rotate(360deg) translateY(117.61575px) !important;
          transform: rotate(360deg) translateY(117.61575px) !important;
}

.sides16:nth-child(1) {
  -webkit-transform: rotate(22.5deg) translateY(125.68349px) !important;
          transform: rotate(22.5deg) translateY(125.68349px) !important;
}

.sides16:nth-child(2) {
  -webkit-transform: rotate(45deg) translateY(125.68349px) !important;
          transform: rotate(45deg) translateY(125.68349px) !important;
}

.sides16:nth-child(3) {
  -webkit-transform: rotate(67.5deg) translateY(125.68349px) !important;
          transform: rotate(67.5deg) translateY(125.68349px) !important;
}

.sides16:nth-child(4) {
  -webkit-transform: rotate(90deg) translateY(125.68349px) !important;
          transform: rotate(90deg) translateY(125.68349px) !important;
}

.sides16:nth-child(5) {
  -webkit-transform: rotate(112.5deg) translateY(125.68349px) !important;
          transform: rotate(112.5deg) translateY(125.68349px) !important;
}

.sides16:nth-child(6) {
  -webkit-transform: rotate(135deg) translateY(125.68349px) !important;
          transform: rotate(135deg) translateY(125.68349px) !important;
}

.sides16:nth-child(7) {
  -webkit-transform: rotate(157.5deg) translateY(125.68349px) !important;
          transform: rotate(157.5deg) translateY(125.68349px) !important;
}

.sides16:nth-child(8) {
  -webkit-transform: rotate(180deg) translateY(125.68349px) !important;
          transform: rotate(180deg) translateY(125.68349px) !important;
}

.sides16:nth-child(9) {
  -webkit-transform: rotate(202.5deg) translateY(125.68349px) !important;
          transform: rotate(202.5deg) translateY(125.68349px) !important;
}

.sides16:nth-child(10) {
  -webkit-transform: rotate(225deg) translateY(125.68349px) !important;
          transform: rotate(225deg) translateY(125.68349px) !important;
}

.sides16:nth-child(11) {
  -webkit-transform: rotate(247.5deg) translateY(125.68349px) !important;
          transform: rotate(247.5deg) translateY(125.68349px) !important;
}

.sides16:nth-child(12) {
  -webkit-transform: rotate(270deg) translateY(125.68349px) !important;
          transform: rotate(270deg) translateY(125.68349px) !important;
}

.sides16:nth-child(13) {
  -webkit-transform: rotate(292.5deg) translateY(125.68349px) !important;
          transform: rotate(292.5deg) translateY(125.68349px) !important;
}

.sides16:nth-child(14) {
  -webkit-transform: rotate(315deg) translateY(125.68349px) !important;
          transform: rotate(315deg) translateY(125.68349px) !important;
}

.sides16:nth-child(15) {
  -webkit-transform: rotate(337.5deg) translateY(125.68349px) !important;
          transform: rotate(337.5deg) translateY(125.68349px) !important;
}

.sides16:nth-child(16) {
  -webkit-transform: rotate(360deg) translateY(125.68349px) !important;
          transform: rotate(360deg) translateY(125.68349px) !important;
}

.sides17:nth-child(1) {
  -webkit-transform: rotate(21.17647deg) translateY(133.73819px) !important;
          transform: rotate(21.17647deg) translateY(133.73819px) !important;
}

.sides17:nth-child(2) {
  -webkit-transform: rotate(42.35294deg) translateY(133.73819px) !important;
          transform: rotate(42.35294deg) translateY(133.73819px) !important;
}

.sides17:nth-child(3) {
  -webkit-transform: rotate(63.52941deg) translateY(133.73819px) !important;
          transform: rotate(63.52941deg) translateY(133.73819px) !important;
}

.sides17:nth-child(4) {
  -webkit-transform: rotate(84.70588deg) translateY(133.73819px) !important;
          transform: rotate(84.70588deg) translateY(133.73819px) !important;
}

.sides17:nth-child(5) {
  -webkit-transform: rotate(105.88235deg) translateY(133.73819px) !important;
          transform: rotate(105.88235deg) translateY(133.73819px) !important;
}

.sides17:nth-child(6) {
  -webkit-transform: rotate(127.05882deg) translateY(133.73819px) !important;
          transform: rotate(127.05882deg) translateY(133.73819px) !important;
}

.sides17:nth-child(7) {
  -webkit-transform: rotate(148.23529deg) translateY(133.73819px) !important;
          transform: rotate(148.23529deg) translateY(133.73819px) !important;
}

.sides17:nth-child(8) {
  -webkit-transform: rotate(169.41176deg) translateY(133.73819px) !important;
          transform: rotate(169.41176deg) translateY(133.73819px) !important;
}

.sides17:nth-child(9) {
  -webkit-transform: rotate(190.58824deg) translateY(133.73819px) !important;
          transform: rotate(190.58824deg) translateY(133.73819px) !important;
}

.sides17:nth-child(10) {
  -webkit-transform: rotate(211.76471deg) translateY(133.73819px) !important;
          transform: rotate(211.76471deg) translateY(133.73819px) !important;
}

.sides17:nth-child(11) {
  -webkit-transform: rotate(232.94118deg) translateY(133.73819px) !important;
          transform: rotate(232.94118deg) translateY(133.73819px) !important;
}

.sides17:nth-child(12) {
  -webkit-transform: rotate(254.11765deg) translateY(133.73819px) !important;
          transform: rotate(254.11765deg) translateY(133.73819px) !important;
}

.sides17:nth-child(13) {
  -webkit-transform: rotate(275.29412deg) translateY(133.73819px) !important;
          transform: rotate(275.29412deg) translateY(133.73819px) !important;
}

.sides17:nth-child(14) {
  -webkit-transform: rotate(296.47059deg) translateY(133.73819px) !important;
          transform: rotate(296.47059deg) translateY(133.73819px) !important;
}

.sides17:nth-child(15) {
  -webkit-transform: rotate(317.64706deg) translateY(133.73819px) !important;
          transform: rotate(317.64706deg) translateY(133.73819px) !important;
}

.sides17:nth-child(16) {
  -webkit-transform: rotate(338.82353deg) translateY(133.73819px) !important;
          transform: rotate(338.82353deg) translateY(133.73819px) !important;
}

.sides17:nth-child(17) {
  -webkit-transform: rotate(360deg) translateY(133.73819px) !important;
          transform: rotate(360deg) translateY(133.73819px) !important;
}

.sides18:nth-child(1) {
  -webkit-transform: rotate(20deg) translateY(141.78205px) !important;
          transform: rotate(20deg) translateY(141.78205px) !important;
}

.sides18:nth-child(2) {
  -webkit-transform: rotate(40deg) translateY(141.78205px) !important;
          transform: rotate(40deg) translateY(141.78205px) !important;
}

.sides18:nth-child(3) {
  -webkit-transform: rotate(60deg) translateY(141.78205px) !important;
          transform: rotate(60deg) translateY(141.78205px) !important;
}

.sides18:nth-child(4) {
  -webkit-transform: rotate(80deg) translateY(141.78205px) !important;
          transform: rotate(80deg) translateY(141.78205px) !important;
}

.sides18:nth-child(5) {
  -webkit-transform: rotate(100deg) translateY(141.78205px) !important;
          transform: rotate(100deg) translateY(141.78205px) !important;
}

.sides18:nth-child(6) {
  -webkit-transform: rotate(120deg) translateY(141.78205px) !important;
          transform: rotate(120deg) translateY(141.78205px) !important;
}

.sides18:nth-child(7) {
  -webkit-transform: rotate(140deg) translateY(141.78205px) !important;
          transform: rotate(140deg) translateY(141.78205px) !important;
}

.sides18:nth-child(8) {
  -webkit-transform: rotate(160deg) translateY(141.78205px) !important;
          transform: rotate(160deg) translateY(141.78205px) !important;
}

.sides18:nth-child(9) {
  -webkit-transform: rotate(180deg) translateY(141.78205px) !important;
          transform: rotate(180deg) translateY(141.78205px) !important;
}

.sides18:nth-child(10) {
  -webkit-transform: rotate(200deg) translateY(141.78205px) !important;
          transform: rotate(200deg) translateY(141.78205px) !important;
}

.sides18:nth-child(11) {
  -webkit-transform: rotate(220deg) translateY(141.78205px) !important;
          transform: rotate(220deg) translateY(141.78205px) !important;
}

.sides18:nth-child(12) {
  -webkit-transform: rotate(240deg) translateY(141.78205px) !important;
          transform: rotate(240deg) translateY(141.78205px) !important;
}

.sides18:nth-child(13) {
  -webkit-transform: rotate(260deg) translateY(141.78205px) !important;
          transform: rotate(260deg) translateY(141.78205px) !important;
}

.sides18:nth-child(14) {
  -webkit-transform: rotate(280deg) translateY(141.78205px) !important;
          transform: rotate(280deg) translateY(141.78205px) !important;
}

.sides18:nth-child(15) {
  -webkit-transform: rotate(300deg) translateY(141.78205px) !important;
          transform: rotate(300deg) translateY(141.78205px) !important;
}

.sides18:nth-child(16) {
  -webkit-transform: rotate(320deg) translateY(141.78205px) !important;
          transform: rotate(320deg) translateY(141.78205px) !important;
}

.sides18:nth-child(17) {
  -webkit-transform: rotate(340deg) translateY(141.78205px) !important;
          transform: rotate(340deg) translateY(141.78205px) !important;
}

.sides18:nth-child(18) {
  -webkit-transform: rotate(360deg) translateY(141.78205px) !important;
          transform: rotate(360deg) translateY(141.78205px) !important;
}

.sides19:nth-child(1) {
  -webkit-transform: rotate(18.94737deg) translateY(149.81679px) !important;
          transform: rotate(18.94737deg) translateY(149.81679px) !important;
}

.sides19:nth-child(2) {
  -webkit-transform: rotate(37.89474deg) translateY(149.81679px) !important;
          transform: rotate(37.89474deg) translateY(149.81679px) !important;
}

.sides19:nth-child(3) {
  -webkit-transform: rotate(56.84211deg) translateY(149.81679px) !important;
          transform: rotate(56.84211deg) translateY(149.81679px) !important;
}

.sides19:nth-child(4) {
  -webkit-transform: rotate(75.78947deg) translateY(149.81679px) !important;
          transform: rotate(75.78947deg) translateY(149.81679px) !important;
}

.sides19:nth-child(5) {
  -webkit-transform: rotate(94.73684deg) translateY(149.81679px) !important;
          transform: rotate(94.73684deg) translateY(149.81679px) !important;
}

.sides19:nth-child(6) {
  -webkit-transform: rotate(113.68421deg) translateY(149.81679px) !important;
          transform: rotate(113.68421deg) translateY(149.81679px) !important;
}

.sides19:nth-child(7) {
  -webkit-transform: rotate(132.63158deg) translateY(149.81679px) !important;
          transform: rotate(132.63158deg) translateY(149.81679px) !important;
}

.sides19:nth-child(8) {
  -webkit-transform: rotate(151.57895deg) translateY(149.81679px) !important;
          transform: rotate(151.57895deg) translateY(149.81679px) !important;
}

.sides19:nth-child(9) {
  -webkit-transform: rotate(170.52632deg) translateY(149.81679px) !important;
          transform: rotate(170.52632deg) translateY(149.81679px) !important;
}

.sides19:nth-child(10) {
  -webkit-transform: rotate(189.47368deg) translateY(149.81679px) !important;
          transform: rotate(189.47368deg) translateY(149.81679px) !important;
}

.sides19:nth-child(11) {
  -webkit-transform: rotate(208.42105deg) translateY(149.81679px) !important;
          transform: rotate(208.42105deg) translateY(149.81679px) !important;
}

.sides19:nth-child(12) {
  -webkit-transform: rotate(227.36842deg) translateY(149.81679px) !important;
          transform: rotate(227.36842deg) translateY(149.81679px) !important;
}

.sides19:nth-child(13) {
  -webkit-transform: rotate(246.31579deg) translateY(149.81679px) !important;
          transform: rotate(246.31579deg) translateY(149.81679px) !important;
}

.sides19:nth-child(14) {
  -webkit-transform: rotate(265.26316deg) translateY(149.81679px) !important;
          transform: rotate(265.26316deg) translateY(149.81679px) !important;
}

.sides19:nth-child(15) {
  -webkit-transform: rotate(284.21053deg) translateY(149.81679px) !important;
          transform: rotate(284.21053deg) translateY(149.81679px) !important;
}

.sides19:nth-child(16) {
  -webkit-transform: rotate(303.15789deg) translateY(149.81679px) !important;
          transform: rotate(303.15789deg) translateY(149.81679px) !important;
}

.sides19:nth-child(17) {
  -webkit-transform: rotate(322.10526deg) translateY(149.81679px) !important;
          transform: rotate(322.10526deg) translateY(149.81679px) !important;
}

.sides19:nth-child(18) {
  -webkit-transform: rotate(341.05263deg) translateY(149.81679px) !important;
          transform: rotate(341.05263deg) translateY(149.81679px) !important;
}

.sides19:nth-child(19) {
  -webkit-transform: rotate(360deg) translateY(149.81679px) !important;
          transform: rotate(360deg) translateY(149.81679px) !important;
}

.sides20:nth-child(1) {
  -webkit-transform: rotate(18deg) translateY(157.84379px) !important;
          transform: rotate(18deg) translateY(157.84379px) !important;
}

.sides20:nth-child(2) {
  -webkit-transform: rotate(36deg) translateY(157.84379px) !important;
          transform: rotate(36deg) translateY(157.84379px) !important;
}

.sides20:nth-child(3) {
  -webkit-transform: rotate(54deg) translateY(157.84379px) !important;
          transform: rotate(54deg) translateY(157.84379px) !important;
}

.sides20:nth-child(4) {
  -webkit-transform: rotate(72deg) translateY(157.84379px) !important;
          transform: rotate(72deg) translateY(157.84379px) !important;
}

.sides20:nth-child(5) {
  -webkit-transform: rotate(90deg) translateY(157.84379px) !important;
          transform: rotate(90deg) translateY(157.84379px) !important;
}

.sides20:nth-child(6) {
  -webkit-transform: rotate(108deg) translateY(157.84379px) !important;
          transform: rotate(108deg) translateY(157.84379px) !important;
}

.sides20:nth-child(7) {
  -webkit-transform: rotate(126deg) translateY(157.84379px) !important;
          transform: rotate(126deg) translateY(157.84379px) !important;
}

.sides20:nth-child(8) {
  -webkit-transform: rotate(144deg) translateY(157.84379px) !important;
          transform: rotate(144deg) translateY(157.84379px) !important;
}

.sides20:nth-child(9) {
  -webkit-transform: rotate(162deg) translateY(157.84379px) !important;
          transform: rotate(162deg) translateY(157.84379px) !important;
}

.sides20:nth-child(10) {
  -webkit-transform: rotate(180deg) translateY(157.84379px) !important;
          transform: rotate(180deg) translateY(157.84379px) !important;
}

.sides20:nth-child(11) {
  -webkit-transform: rotate(198deg) translateY(157.84379px) !important;
          transform: rotate(198deg) translateY(157.84379px) !important;
}

.sides20:nth-child(12) {
  -webkit-transform: rotate(216deg) translateY(157.84379px) !important;
          transform: rotate(216deg) translateY(157.84379px) !important;
}

.sides20:nth-child(13) {
  -webkit-transform: rotate(234deg) translateY(157.84379px) !important;
          transform: rotate(234deg) translateY(157.84379px) !important;
}

.sides20:nth-child(14) {
  -webkit-transform: rotate(252deg) translateY(157.84379px) !important;
          transform: rotate(252deg) translateY(157.84379px) !important;
}

.sides20:nth-child(15) {
  -webkit-transform: rotate(270deg) translateY(157.84379px) !important;
          transform: rotate(270deg) translateY(157.84379px) !important;
}

.sides20:nth-child(16) {
  -webkit-transform: rotate(288deg) translateY(157.84379px) !important;
          transform: rotate(288deg) translateY(157.84379px) !important;
}

.sides20:nth-child(17) {
  -webkit-transform: rotate(306deg) translateY(157.84379px) !important;
          transform: rotate(306deg) translateY(157.84379px) !important;
}

.sides20:nth-child(18) {
  -webkit-transform: rotate(324deg) translateY(157.84379px) !important;
          transform: rotate(324deg) translateY(157.84379px) !important;
}

.sides20:nth-child(19) {
  -webkit-transform: rotate(342deg) translateY(157.84379px) !important;
          transform: rotate(342deg) translateY(157.84379px) !important;
}

.sides20:nth-child(20) {
  -webkit-transform: rotate(360deg) translateY(157.84379px) !important;
          transform: rotate(360deg) translateY(157.84379px) !important;
}

.sides21:nth-child(1) {
  -webkit-transform: rotate(17.14286deg) translateY(165.86416px) !important;
          transform: rotate(17.14286deg) translateY(165.86416px) !important;
}

.sides21:nth-child(2) {
  -webkit-transform: rotate(34.28571deg) translateY(165.86416px) !important;
          transform: rotate(34.28571deg) translateY(165.86416px) !important;
}

.sides21:nth-child(3) {
  -webkit-transform: rotate(51.42857deg) translateY(165.86416px) !important;
          transform: rotate(51.42857deg) translateY(165.86416px) !important;
}

.sides21:nth-child(4) {
  -webkit-transform: rotate(68.57143deg) translateY(165.86416px) !important;
          transform: rotate(68.57143deg) translateY(165.86416px) !important;
}

.sides21:nth-child(5) {
  -webkit-transform: rotate(85.71429deg) translateY(165.86416px) !important;
          transform: rotate(85.71429deg) translateY(165.86416px) !important;
}

.sides21:nth-child(6) {
  -webkit-transform: rotate(102.85714deg) translateY(165.86416px) !important;
          transform: rotate(102.85714deg) translateY(165.86416px) !important;
}

.sides21:nth-child(7) {
  -webkit-transform: rotate(120deg) translateY(165.86416px) !important;
          transform: rotate(120deg) translateY(165.86416px) !important;
}

.sides21:nth-child(8) {
  -webkit-transform: rotate(137.14286deg) translateY(165.86416px) !important;
          transform: rotate(137.14286deg) translateY(165.86416px) !important;
}

.sides21:nth-child(9) {
  -webkit-transform: rotate(154.28571deg) translateY(165.86416px) !important;
          transform: rotate(154.28571deg) translateY(165.86416px) !important;
}

.sides21:nth-child(10) {
  -webkit-transform: rotate(171.42857deg) translateY(165.86416px) !important;
          transform: rotate(171.42857deg) translateY(165.86416px) !important;
}

.sides21:nth-child(11) {
  -webkit-transform: rotate(188.57143deg) translateY(165.86416px) !important;
          transform: rotate(188.57143deg) translateY(165.86416px) !important;
}

.sides21:nth-child(12) {
  -webkit-transform: rotate(205.71429deg) translateY(165.86416px) !important;
          transform: rotate(205.71429deg) translateY(165.86416px) !important;
}

.sides21:nth-child(13) {
  -webkit-transform: rotate(222.85714deg) translateY(165.86416px) !important;
          transform: rotate(222.85714deg) translateY(165.86416px) !important;
}

.sides21:nth-child(14) {
  -webkit-transform: rotate(240deg) translateY(165.86416px) !important;
          transform: rotate(240deg) translateY(165.86416px) !important;
}

.sides21:nth-child(15) {
  -webkit-transform: rotate(257.14286deg) translateY(165.86416px) !important;
          transform: rotate(257.14286deg) translateY(165.86416px) !important;
}

.sides21:nth-child(16) {
  -webkit-transform: rotate(274.28571deg) translateY(165.86416px) !important;
          transform: rotate(274.28571deg) translateY(165.86416px) !important;
}

.sides21:nth-child(17) {
  -webkit-transform: rotate(291.42857deg) translateY(165.86416px) !important;
          transform: rotate(291.42857deg) translateY(165.86416px) !important;
}

.sides21:nth-child(18) {
  -webkit-transform: rotate(308.57143deg) translateY(165.86416px) !important;
          transform: rotate(308.57143deg) translateY(165.86416px) !important;
}

.sides21:nth-child(19) {
  -webkit-transform: rotate(325.71429deg) translateY(165.86416px) !important;
          transform: rotate(325.71429deg) translateY(165.86416px) !important;
}

.sides21:nth-child(20) {
  -webkit-transform: rotate(342.85714deg) translateY(165.86416px) !important;
          transform: rotate(342.85714deg) translateY(165.86416px) !important;
}

.sides21:nth-child(21) {
  -webkit-transform: rotate(360deg) translateY(165.86416px) !important;
          transform: rotate(360deg) translateY(165.86416px) !important;
}

.sides22:nth-child(1) {
  -webkit-transform: rotate(16.36364deg) translateY(173.87882px) !important;
          transform: rotate(16.36364deg) translateY(173.87882px) !important;
}

.sides22:nth-child(2) {
  -webkit-transform: rotate(32.72727deg) translateY(173.87882px) !important;
          transform: rotate(32.72727deg) translateY(173.87882px) !important;
}

.sides22:nth-child(3) {
  -webkit-transform: rotate(49.09091deg) translateY(173.87882px) !important;
          transform: rotate(49.09091deg) translateY(173.87882px) !important;
}

.sides22:nth-child(4) {
  -webkit-transform: rotate(65.45455deg) translateY(173.87882px) !important;
          transform: rotate(65.45455deg) translateY(173.87882px) !important;
}

.sides22:nth-child(5) {
  -webkit-transform: rotate(81.81818deg) translateY(173.87882px) !important;
          transform: rotate(81.81818deg) translateY(173.87882px) !important;
}

.sides22:nth-child(6) {
  -webkit-transform: rotate(98.18182deg) translateY(173.87882px) !important;
          transform: rotate(98.18182deg) translateY(173.87882px) !important;
}

.sides22:nth-child(7) {
  -webkit-transform: rotate(114.54545deg) translateY(173.87882px) !important;
          transform: rotate(114.54545deg) translateY(173.87882px) !important;
}

.sides22:nth-child(8) {
  -webkit-transform: rotate(130.90909deg) translateY(173.87882px) !important;
          transform: rotate(130.90909deg) translateY(173.87882px) !important;
}

.sides22:nth-child(9) {
  -webkit-transform: rotate(147.27273deg) translateY(173.87882px) !important;
          transform: rotate(147.27273deg) translateY(173.87882px) !important;
}

.sides22:nth-child(10) {
  -webkit-transform: rotate(163.63636deg) translateY(173.87882px) !important;
          transform: rotate(163.63636deg) translateY(173.87882px) !important;
}

.sides22:nth-child(11) {
  -webkit-transform: rotate(180deg) translateY(173.87882px) !important;
          transform: rotate(180deg) translateY(173.87882px) !important;
}

.sides22:nth-child(12) {
  -webkit-transform: rotate(196.36364deg) translateY(173.87882px) !important;
          transform: rotate(196.36364deg) translateY(173.87882px) !important;
}

.sides22:nth-child(13) {
  -webkit-transform: rotate(212.72727deg) translateY(173.87882px) !important;
          transform: rotate(212.72727deg) translateY(173.87882px) !important;
}

.sides22:nth-child(14) {
  -webkit-transform: rotate(229.09091deg) translateY(173.87882px) !important;
          transform: rotate(229.09091deg) translateY(173.87882px) !important;
}

.sides22:nth-child(15) {
  -webkit-transform: rotate(245.45455deg) translateY(173.87882px) !important;
          transform: rotate(245.45455deg) translateY(173.87882px) !important;
}

.sides22:nth-child(16) {
  -webkit-transform: rotate(261.81818deg) translateY(173.87882px) !important;
          transform: rotate(261.81818deg) translateY(173.87882px) !important;
}

.sides22:nth-child(17) {
  -webkit-transform: rotate(278.18182deg) translateY(173.87882px) !important;
          transform: rotate(278.18182deg) translateY(173.87882px) !important;
}

.sides22:nth-child(18) {
  -webkit-transform: rotate(294.54545deg) translateY(173.87882px) !important;
          transform: rotate(294.54545deg) translateY(173.87882px) !important;
}

.sides22:nth-child(19) {
  -webkit-transform: rotate(310.90909deg) translateY(173.87882px) !important;
          transform: rotate(310.90909deg) translateY(173.87882px) !important;
}

.sides22:nth-child(20) {
  -webkit-transform: rotate(327.27273deg) translateY(173.87882px) !important;
          transform: rotate(327.27273deg) translateY(173.87882px) !important;
}

.sides22:nth-child(21) {
  -webkit-transform: rotate(343.63636deg) translateY(173.87882px) !important;
          transform: rotate(343.63636deg) translateY(173.87882px) !important;
}

.sides22:nth-child(22) {
  -webkit-transform: rotate(360deg) translateY(173.87882px) !important;
          transform: rotate(360deg) translateY(173.87882px) !important;
}

.sides23:nth-child(1) {
  -webkit-transform: rotate(15.65217deg) translateY(181.88851px) !important;
          transform: rotate(15.65217deg) translateY(181.88851px) !important;
}

.sides23:nth-child(2) {
  -webkit-transform: rotate(31.30435deg) translateY(181.88851px) !important;
          transform: rotate(31.30435deg) translateY(181.88851px) !important;
}

.sides23:nth-child(3) {
  -webkit-transform: rotate(46.95652deg) translateY(181.88851px) !important;
          transform: rotate(46.95652deg) translateY(181.88851px) !important;
}

.sides23:nth-child(4) {
  -webkit-transform: rotate(62.6087deg) translateY(181.88851px) !important;
          transform: rotate(62.6087deg) translateY(181.88851px) !important;
}

.sides23:nth-child(5) {
  -webkit-transform: rotate(78.26087deg) translateY(181.88851px) !important;
          transform: rotate(78.26087deg) translateY(181.88851px) !important;
}

.sides23:nth-child(6) {
  -webkit-transform: rotate(93.91304deg) translateY(181.88851px) !important;
          transform: rotate(93.91304deg) translateY(181.88851px) !important;
}

.sides23:nth-child(7) {
  -webkit-transform: rotate(109.56522deg) translateY(181.88851px) !important;
          transform: rotate(109.56522deg) translateY(181.88851px) !important;
}

.sides23:nth-child(8) {
  -webkit-transform: rotate(125.21739deg) translateY(181.88851px) !important;
          transform: rotate(125.21739deg) translateY(181.88851px) !important;
}

.sides23:nth-child(9) {
  -webkit-transform: rotate(140.86957deg) translateY(181.88851px) !important;
          transform: rotate(140.86957deg) translateY(181.88851px) !important;
}

.sides23:nth-child(10) {
  -webkit-transform: rotate(156.52174deg) translateY(181.88851px) !important;
          transform: rotate(156.52174deg) translateY(181.88851px) !important;
}

.sides23:nth-child(11) {
  -webkit-transform: rotate(172.17391deg) translateY(181.88851px) !important;
          transform: rotate(172.17391deg) translateY(181.88851px) !important;
}

.sides23:nth-child(12) {
  -webkit-transform: rotate(187.82609deg) translateY(181.88851px) !important;
          transform: rotate(187.82609deg) translateY(181.88851px) !important;
}

.sides23:nth-child(13) {
  -webkit-transform: rotate(203.47826deg) translateY(181.88851px) !important;
          transform: rotate(203.47826deg) translateY(181.88851px) !important;
}

.sides23:nth-child(14) {
  -webkit-transform: rotate(219.13043deg) translateY(181.88851px) !important;
          transform: rotate(219.13043deg) translateY(181.88851px) !important;
}

.sides23:nth-child(15) {
  -webkit-transform: rotate(234.78261deg) translateY(181.88851px) !important;
          transform: rotate(234.78261deg) translateY(181.88851px) !important;
}

.sides23:nth-child(16) {
  -webkit-transform: rotate(250.43478deg) translateY(181.88851px) !important;
          transform: rotate(250.43478deg) translateY(181.88851px) !important;
}

.sides23:nth-child(17) {
  -webkit-transform: rotate(266.08696deg) translateY(181.88851px) !important;
          transform: rotate(266.08696deg) translateY(181.88851px) !important;
}

.sides23:nth-child(18) {
  -webkit-transform: rotate(281.73913deg) translateY(181.88851px) !important;
          transform: rotate(281.73913deg) translateY(181.88851px) !important;
}

.sides23:nth-child(19) {
  -webkit-transform: rotate(297.3913deg) translateY(181.88851px) !important;
          transform: rotate(297.3913deg) translateY(181.88851px) !important;
}

.sides23:nth-child(20) {
  -webkit-transform: rotate(313.04348deg) translateY(181.88851px) !important;
          transform: rotate(313.04348deg) translateY(181.88851px) !important;
}

.sides23:nth-child(21) {
  -webkit-transform: rotate(328.69565deg) translateY(181.88851px) !important;
          transform: rotate(328.69565deg) translateY(181.88851px) !important;
}

.sides23:nth-child(22) {
  -webkit-transform: rotate(344.34783deg) translateY(181.88851px) !important;
          transform: rotate(344.34783deg) translateY(181.88851px) !important;
}

.sides23:nth-child(23) {
  -webkit-transform: rotate(360deg) translateY(181.88851px) !important;
          transform: rotate(360deg) translateY(181.88851px) !important;
}

.sides24:nth-child(1) {
  -webkit-transform: rotate(15deg) translateY(189.89385px) !important;
          transform: rotate(15deg) translateY(189.89385px) !important;
}

.sides24:nth-child(2) {
  -webkit-transform: rotate(30deg) translateY(189.89385px) !important;
          transform: rotate(30deg) translateY(189.89385px) !important;
}

.sides24:nth-child(3) {
  -webkit-transform: rotate(45deg) translateY(189.89385px) !important;
          transform: rotate(45deg) translateY(189.89385px) !important;
}

.sides24:nth-child(4) {
  -webkit-transform: rotate(60deg) translateY(189.89385px) !important;
          transform: rotate(60deg) translateY(189.89385px) !important;
}

.sides24:nth-child(5) {
  -webkit-transform: rotate(75deg) translateY(189.89385px) !important;
          transform: rotate(75deg) translateY(189.89385px) !important;
}

.sides24:nth-child(6) {
  -webkit-transform: rotate(90deg) translateY(189.89385px) !important;
          transform: rotate(90deg) translateY(189.89385px) !important;
}

.sides24:nth-child(7) {
  -webkit-transform: rotate(105deg) translateY(189.89385px) !important;
          transform: rotate(105deg) translateY(189.89385px) !important;
}

.sides24:nth-child(8) {
  -webkit-transform: rotate(120deg) translateY(189.89385px) !important;
          transform: rotate(120deg) translateY(189.89385px) !important;
}

.sides24:nth-child(9) {
  -webkit-transform: rotate(135deg) translateY(189.89385px) !important;
          transform: rotate(135deg) translateY(189.89385px) !important;
}

.sides24:nth-child(10) {
  -webkit-transform: rotate(150deg) translateY(189.89385px) !important;
          transform: rotate(150deg) translateY(189.89385px) !important;
}

.sides24:nth-child(11) {
  -webkit-transform: rotate(165deg) translateY(189.89385px) !important;
          transform: rotate(165deg) translateY(189.89385px) !important;
}

.sides24:nth-child(12) {
  -webkit-transform: rotate(180deg) translateY(189.89385px) !important;
          transform: rotate(180deg) translateY(189.89385px) !important;
}

.sides24:nth-child(13) {
  -webkit-transform: rotate(195deg) translateY(189.89385px) !important;
          transform: rotate(195deg) translateY(189.89385px) !important;
}

.sides24:nth-child(14) {
  -webkit-transform: rotate(210deg) translateY(189.89385px) !important;
          transform: rotate(210deg) translateY(189.89385px) !important;
}

.sides24:nth-child(15) {
  -webkit-transform: rotate(225deg) translateY(189.89385px) !important;
          transform: rotate(225deg) translateY(189.89385px) !important;
}

.sides24:nth-child(16) {
  -webkit-transform: rotate(240deg) translateY(189.89385px) !important;
          transform: rotate(240deg) translateY(189.89385px) !important;
}

.sides24:nth-child(17) {
  -webkit-transform: rotate(255deg) translateY(189.89385px) !important;
          transform: rotate(255deg) translateY(189.89385px) !important;
}

.sides24:nth-child(18) {
  -webkit-transform: rotate(270deg) translateY(189.89385px) !important;
          transform: rotate(270deg) translateY(189.89385px) !important;
}

.sides24:nth-child(19) {
  -webkit-transform: rotate(285deg) translateY(189.89385px) !important;
          transform: rotate(285deg) translateY(189.89385px) !important;
}

.sides24:nth-child(20) {
  -webkit-transform: rotate(300deg) translateY(189.89385px) !important;
          transform: rotate(300deg) translateY(189.89385px) !important;
}

.sides24:nth-child(21) {
  -webkit-transform: rotate(315deg) translateY(189.89385px) !important;
          transform: rotate(315deg) translateY(189.89385px) !important;
}

.sides24:nth-child(22) {
  -webkit-transform: rotate(330deg) translateY(189.89385px) !important;
          transform: rotate(330deg) translateY(189.89385px) !important;
}

.sides24:nth-child(23) {
  -webkit-transform: rotate(345deg) translateY(189.89385px) !important;
          transform: rotate(345deg) translateY(189.89385px) !important;
}

.sides24:nth-child(24) {
  -webkit-transform: rotate(360deg) translateY(189.89385px) !important;
          transform: rotate(360deg) translateY(189.89385px) !important;
}

.sides25:nth-child(1) {
  -webkit-transform: rotate(14.4deg) translateY(197.89538px) !important;
          transform: rotate(14.4deg) translateY(197.89538px) !important;
}

.sides25:nth-child(2) {
  -webkit-transform: rotate(28.8deg) translateY(197.89538px) !important;
          transform: rotate(28.8deg) translateY(197.89538px) !important;
}

.sides25:nth-child(3) {
  -webkit-transform: rotate(43.2deg) translateY(197.89538px) !important;
          transform: rotate(43.2deg) translateY(197.89538px) !important;
}

.sides25:nth-child(4) {
  -webkit-transform: rotate(57.6deg) translateY(197.89538px) !important;
          transform: rotate(57.6deg) translateY(197.89538px) !important;
}

.sides25:nth-child(5) {
  -webkit-transform: rotate(72deg) translateY(197.89538px) !important;
          transform: rotate(72deg) translateY(197.89538px) !important;
}

.sides25:nth-child(6) {
  -webkit-transform: rotate(86.4deg) translateY(197.89538px) !important;
          transform: rotate(86.4deg) translateY(197.89538px) !important;
}

.sides25:nth-child(7) {
  -webkit-transform: rotate(100.8deg) translateY(197.89538px) !important;
          transform: rotate(100.8deg) translateY(197.89538px) !important;
}

.sides25:nth-child(8) {
  -webkit-transform: rotate(115.2deg) translateY(197.89538px) !important;
          transform: rotate(115.2deg) translateY(197.89538px) !important;
}

.sides25:nth-child(9) {
  -webkit-transform: rotate(129.6deg) translateY(197.89538px) !important;
          transform: rotate(129.6deg) translateY(197.89538px) !important;
}

.sides25:nth-child(10) {
  -webkit-transform: rotate(144deg) translateY(197.89538px) !important;
          transform: rotate(144deg) translateY(197.89538px) !important;
}

.sides25:nth-child(11) {
  -webkit-transform: rotate(158.4deg) translateY(197.89538px) !important;
          transform: rotate(158.4deg) translateY(197.89538px) !important;
}

.sides25:nth-child(12) {
  -webkit-transform: rotate(172.8deg) translateY(197.89538px) !important;
          transform: rotate(172.8deg) translateY(197.89538px) !important;
}

.sides25:nth-child(13) {
  -webkit-transform: rotate(187.2deg) translateY(197.89538px) !important;
          transform: rotate(187.2deg) translateY(197.89538px) !important;
}

.sides25:nth-child(14) {
  -webkit-transform: rotate(201.6deg) translateY(197.89538px) !important;
          transform: rotate(201.6deg) translateY(197.89538px) !important;
}

.sides25:nth-child(15) {
  -webkit-transform: rotate(216deg) translateY(197.89538px) !important;
          transform: rotate(216deg) translateY(197.89538px) !important;
}

.sides25:nth-child(16) {
  -webkit-transform: rotate(230.4deg) translateY(197.89538px) !important;
          transform: rotate(230.4deg) translateY(197.89538px) !important;
}

.sides25:nth-child(17) {
  -webkit-transform: rotate(244.8deg) translateY(197.89538px) !important;
          transform: rotate(244.8deg) translateY(197.89538px) !important;
}

.sides25:nth-child(18) {
  -webkit-transform: rotate(259.2deg) translateY(197.89538px) !important;
          transform: rotate(259.2deg) translateY(197.89538px) !important;
}

.sides25:nth-child(19) {
  -webkit-transform: rotate(273.6deg) translateY(197.89538px) !important;
          transform: rotate(273.6deg) translateY(197.89538px) !important;
}

.sides25:nth-child(20) {
  -webkit-transform: rotate(288deg) translateY(197.89538px) !important;
          transform: rotate(288deg) translateY(197.89538px) !important;
}

.sides25:nth-child(21) {
  -webkit-transform: rotate(302.4deg) translateY(197.89538px) !important;
          transform: rotate(302.4deg) translateY(197.89538px) !important;
}

.sides25:nth-child(22) {
  -webkit-transform: rotate(316.8deg) translateY(197.89538px) !important;
          transform: rotate(316.8deg) translateY(197.89538px) !important;
}

.sides25:nth-child(23) {
  -webkit-transform: rotate(331.2deg) translateY(197.89538px) !important;
          transform: rotate(331.2deg) translateY(197.89538px) !important;
}

.sides25:nth-child(24) {
  -webkit-transform: rotate(345.6deg) translateY(197.89538px) !important;
          transform: rotate(345.6deg) translateY(197.89538px) !important;
}

.sides25:nth-child(25) {
  -webkit-transform: rotate(360deg) translateY(197.89538px) !important;
          transform: rotate(360deg) translateY(197.89538px) !important;
}

@-webkit-keyframes spinPoligons {
  0% {
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
  }
  100% {
    -webkit-transform: rotateY(360deg);
            transform: rotateY(360deg);
  }
}

@keyframes spinPoligons {
  0% {
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
  }
  100% {
    -webkit-transform: rotateY(360deg);
            transform: rotateY(360deg);
  }
}
@-webkit-keyframes panePoligons {
  0% {
    -webkit-transform: translateZ(100px) rotateX(-20deg);
            transform: translateZ(100px) rotateX(-20deg);
  }
  50% {
    -webkit-transform: translateZ(100px) rotateX(20deg);
            transform: translateZ(100px) rotateX(20deg);
  }
  100% {
    -webkit-transform: translateZ(100px) rotateX(-20deg);
            transform: translateZ(100px) rotateX(-20deg);
  }
}
@keyframes panePoligons {
  0% {
    -webkit-transform: translateZ(100px) rotateX(-20deg);
            transform: translateZ(100px) rotateX(-20deg);
  }
  50% {
    -webkit-transform: translateZ(100px) rotateX(20deg);
            transform: translateZ(100px) rotateX(20deg);
  }
  100% {
    -webkit-transform: translateZ(100px) rotateX(-20deg);
            transform: translateZ(100px) rotateX(-20deg);
  }
}


/*Downloaded from https://www.codeseek.co/Mihnutzen/regular-polygons-morphing-yywJaB */

var poligonDirection = 'up';
var poligonSides = 4;

var poligonsTimer = setInterval(function () {
  togglePoligonClass();

  if (poligonSides >= 15) {
    poligonDirection = 'down';
    // clearInterval(poligonsTimer);
  }

  if (poligonSides <= 4) {
    poligonDirection = 'up';
  }
}, 2000);

function togglePoligonClass() {
  $('.poligon div').removeClass();
  poligonDirection === 'up' ? poligonSides++ : poligonSides--;
  $('.poligon div').addClass('sides' + poligonSides);
}

Comments