CodePen

HTML

            
              .wrap
  .icecreamcone
    .ball
    .ball
    .ball
    .cherry
    .cone

  .popsicle.champagne
    .top.chocolate
    .soda.green
    .stick
    
  .magnum
    .top.chocolate
    .stick

  .popsicle.filur
    .top.red
    .soda.yellow
    .stick
    
  .popsicle.pirulo 
    .soda.yellow
      .stripes
        .stripe.green
        .stripe.red
        .stripe.yellow
        .stripe.green
    .stick
 
            
          
!

CSS

            
              * {
  margin: 0; 
  padding: 0;
}

body {
  background: hsla(200, 60%, 50%, 1);
  font-size: 30px;
  overflow: hidden;
}
.wrap > * { transition: transform 3s ease-out;}
.wrap:hover > *:nth-child(odd) { transform: rotate(-390deg); }
.wrap:hover > *:nth-child(even) { transform: rotate(390deg); }
.wrap {
  width: 53rem; height: 12rem;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -6rem;
  margin-left: -26.5rem;
}
.wrap > * {
  float: left; clear: none;
  margin-right: 6rem;
}
.icecreamcone {
  height: 12rem; width: 6rem;
  display: inline-block;
  margin-top: 2rem;
  
  .ball {
    height: 4rem; width: 4rem;
    display: inline-block;
    background: hsla(71, 100%, 87%, 1);
    border-radius: 50%;
    margin: -1.2rem;
    box-shadow: 0 0 1.8rem hsla(0, 0%, 0%, .2) inset;
    z-index: 1000;
    position: relative;
  }
  .ball:nth-child(2) { position: relative; top: -1.6rem; }
  
  .cherry {
    height: 1rem; width: 1rem;
    position: absolute;
    background: hsla(9, 100%, 33%, 1);
    border-radius: 50%;
    top: -1rem;
    left: 2.5rem;
    box-shadow: 0 0 .8rem hsla(0, 0%, 0%, .6) inset,
      -.3rem -.3rem .2rem hsla(0, 0%, 100%, .6) inset;
    z-index: 2000;
  }
  .cherry:after {
    content: '';
    display: block;
    background: #111;
    height: 1rem; width: .1rem;
    transform: rotate(50deg);
    position: absolute; 
    right: -.2rem; top: -.7rem;
  }
  .cone {
    height: 9rem; width: 6rem;
    margin-left: 1.4rem;
    margin-top: -4rem;
    transform: rotate(-20deg);
    background: hsla(35, 65%, 57%, 1);
    z-index: 500;
    box-shadow: 0 0 3rem hsla(0, 0%, 0%, .6) inset;
  }
  .cone:after {
    display: block;
    content: '';
    height: 15rem; width: 5rem;
    margin-left: 2rem;
    margin-top: 2rem;
    transform: rotate(40deg);
    background: hsla(200, 60%, 50%, 1);
  }

}
.popsicle {
  height: 12rem; width: 4rem;
  
  * {
  }
  .top, .soda {
  }
  .top {
    height: 3rem;
    border-top-right-radius: 1rem;
    border-top-left-radius: 1rem;
  }
  .soda { /* WTF is this part called? */
    height: 6rem;
  }
}
.chocolate {
    background: hsla(35, 59%, 14%, 1);
    box-shadow: 0 0 2.5rem hsla(0, 0%, 0%, .6) inset;
}
.soda {
    box-shadow: 0 0 2.5rem hsla(0, 0%, 0%, .6) inset;
    border-radius: 0 0 20% 20%;
}
.stick {
  height: 3rem; width: .7rem;
  margin-left: 1.6rem;
  background: hsla(42, 79%, 70%, 1);
  box-shadow: 0 0 .3rem hsla(0, 0%, 0%, .6) inset;
  border-radius: 0 0 .3rem .3rem;
}
.magnum {
  margin-top: .5rem;
  .top {
    height: 8rem; width: 5rem;
    border-radius: 3rem 3rem 40% 40%;
    position: relative;
    background: hsla(35, 60%, 18%, 1);
  }
  .stick {
    width: 1.2rem;
    margin-left: 1.9rem;
    margin-top: -.1rem;
    border-radius: 80% 80% 1rem 1rem;
  }
}
.filur {
  .top {
    border-radius: 50% 50% 0 0;
    box-shadow: 0 0 3rem hsla(0, 0%, 100%, .4) inset;
  }
  .soda {
  }
}
.filur, .champagne {
  margin-top: .5rem;
  .stick {
    height: 2rem;
  }
}
.pirulo {
  margin-top: -1rem;
  .soda {
    border-radius: .5rem;
    height: 12rem;
    width: 2.5rem;
    overflow: hidden;
  }
  .stick {
    margin-left: 1rem;
    width: .45rem;
  }
  .stripes {
    position: relative;
    top: .5rem;
  }
  .stripe {
    height: 6rem;
    width: .6rem;
    transform: rotate(30deg);
    margin-top: -3rem;
    margin-left: 1rem;
    box-shadow: 0 0 .5rem hsla(0, 0%, 0%, .4) inset;
  }
}
.red {
  background: hsla(350, 97%, 38%, 1);
}
.yellow {
  background: hsla(47, 100%, 49%, 1);
}
.green {
  background: hsla(89, 70%, 50%, 1);
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................