Lift Interactive offers a tactile CSS treat

Canadian agency Lift Interactive has launched its new site, featuring tons of cool CSS effects. "We wanted to use our site to display both a new approach to how we want to communicate, but also to show what we are technically capable of," explains frontend developer Adrian Gyuricska.

Viewing the site in a modern, updated browser (Google Chrome is always a safe choice), be sure to scroll down to the Thinking area on the homepage and hover over the books. By transitioning CSS transforms and combining translate and rotate properties, the book front and spine have a nifty 3D effect. 

“Something I enjoyed was the use of 3D transforms on the site. I’m really happy with the banner transforms on the homepage,” says Gyuricska.

More transforms are used on the Work page. Hovering over a thumbnail both scales and moves the image nested within the link, allowing the container to make a mask on the larger sized image, revealing more of it on hover.

Words: Jenn Lukas. This showcase was originally published in .net magazine issue 234.

Now read these!

• 101 CSS and JavaScript tutorials to power up your skills
• Create the perfect design portfolio: 30 pro tips
• The top 15 designer resumé tips