css / link / transform

Pimp my link with CSS transform

Você quer ser o garoto legal? Então você deve modificar seus links com CSS transform.

Antes de começarmos…

Eu uso prefixfree para evitar o inferno do prefixo do fornecedor … você também deveria!
http://leaverou.github.com/prefixfree

Aqui vamos nós

Prepare o link

Para habilitar transformum link, precisamos transformá-lo em um elemento transformável

a {
  display:inline-block;
}

http://www.w3.org/TR/2012/WD-css3-transforms-20120911/#TermTransformableElement

Aplicar as transformações

.scale a:active {
  transform: scale(.85);
}

.rotate a:active {
  transform: rotateY(180deg);
}

.skew a:active {
  transform: skewX(30deg);
}

.translate a:active {
  transform: translateY(.25em);
}

.mixed a:active {
  transform: scale(.85) rotateY(180deg) skewX(30deg) translateY(.25em);
}

Fonte completa e versão ao vivo

http://codepen.io/TimPietrusky/pen/xvLEm

Inspirado no protótipo do Sultão Tarimo

http://coderwall.com/p/2p8zvq