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
Written by Tim Pietrusky
Related protips
1 Response
Nice tips ... I like the "scale" better, thanks for sharing.
over 1 year ago
·
Have a fresh tip? Share with Coderwall community!
Post
Post a tip
Best
#Css
Authors
Sponsored by #native_company# — Learn More
#native_title#
#native_desc#