Transformicons Simplified

A Pen created at CodePen.io. You can find this one at http://codepen.io/trilm/pen/LEejop.

I have a personal crusade to use CSS in the most lightweight way possible. This was my attempt to create icons that transform on interaction.

HTML Structure

Animation Default: Scale

<a class="tIcons" href="#">
  <svg viewBox="0 0 36 30"><rect width="36" height="6"/><rect y="24" width="36" height="6"/><rect y="12" width="36" height="6"/></svg>
  <svg viewBox="0 0 36 30"><polygon points="32.8,4.4 28.6,0.2 18,10.8 7.4,0.2 3.2,4.4 13.8,15 3.2,25.6 7.4,29.8 18,19.2 28.6,29.8 32.8,25.6 22.2,15 "/></svg>
</a>

Animation Enhance: Scale & Rotate

<a class="tIcons tRotate" href="#">
  <svg viewBox="0 0 36 30"><rect width="36" height="6"/><rect y="24" width="36" height="6"/><rect y="12" width="36" height="6"/></svg>
  <svg viewBox="0 0 36 30"><polygon points="32.8,4.4 28.6,0.2 18,10.8 7.4,0.2 3.2,4.4 13.8,15 3.2,25.6 7.4,29.8 18,19.2 28.6,29.8 32.8,25.6 22.2,15 "/></svg>
</a>