Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Lightweight tilt onClick / JS or CSS3

Lightweight tilt onClick / JS or CSS3

Problem

I am trying to create a function where a #div will TILT 15 degrees to the left on click, and then go back to the previous position shortly after, but I think this can be easily added to the solution with adding a Timing event. But the Tilt is what I am having the most trouble with. Ideally I would do this with JavaScript alone; but would be open to jQuery and or CSS3.

I have used the below snippet while creating a custom shake.

jQuery.fn.shake = function() {
    this.each(function(i) {
        $(this).css({ "position" : "relative" });
        for (var x = 1; x 

But it doesn't allow; or I have had no such luck -- creating a 'TILT' effect, only a horizontal or vertical side to side effect. I am assuming I may need to get some CSS3 in there. Any pointers?

DISCLAIMER: I am hoping for a solution of primary JavaScript; as I am supporting IE 9+ / Modern Browsers (chrome, ff, safari). Otherwise there is no real point of implementing at this point. Thanks.

Problem courtesy of: swordfish

Solution

You can create the "tilt" with transform:

.skew{
    -webkit-transform: matrix(1, 0, 0.5, 1,  50, 0);
    -o-transform: matrix(1, 0, 0.5, 1,  50, 0);
    -ms-transform: matrix(1, 0, 0.5, 1,  50, 0);
    transform: matrix(1, 0, .5, 1,  50, 0);
}

http://jsfiddle.net/HemTH/1/

Though browser compatibility might be an issue http://caniuse.com/#search=transforms

Solution courtesy of: James Montagne

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Lightweight tilt onClick / JS or CSS3

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×