Last Updated: February 25, 2016
·
2.748K
· timpietrusky

Pimp my link with CSS transform

Do you want to be the cool kid? Then you should pimp your links with CSS transform.

Before we start...

I use prefixfree to avoid the vendor prefix hell... so should you!
http://leaverou.github.com/prefixfree

Here we go

Prepare the link

To enable transform on a link, we need to change it into a transformable element

a {
  display:inline-block;
}

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

Apply the transforms

.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);
}

Full source & live version

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

Inspired by the protip of Sultan Tarimo

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

1 Response
Add your response

Nice tips ... I like the "scale" better, thanks for sharing.

over 1 year ago ·