Easy tilt onClick / JS or CSS3

Question

I am trying to create a function in which #div will be tilted 15 degrees to the left per click, and then return to the previous position soon, but I think this can be easily added to the solution with the addition of a Sync Event. But Tilt is what I came across. Ideally, I would only do this with JavaScript; but will be open to jQuery and / or CSS3.

I used the snippet below when creating a custom shake.

 jQuery.fn.shake = function() { this.each(function(i) { $(this).css({ "position" : "relative" }); for (var x = 1; x <= 3; x++) { $(this).animate({ left: -15 }, 10).animate({ left: 0 }, 50).animate({ left: 15 }, 10).animate({ left: 0 }, 20); } }); return this; } 

But this does not allow; or I didn’t have such luck - creating the “TILT” effect, only horizontal or vertical side-to-side effect. I guess I might need CSS3. Any pointers?

DISCLAIMER: I hope for a solution to the core JavaScript; since I support IE 9 + / Modern browsers (chrome, ff, safari). Otherwise, at the moment there is no real possibility of implementation. Thanks.

Answer 1

You can create a slope using 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/

Although browser compatibility may be a problem http://caniuse.com/#search=transforms

Answer 2

You can do this with CSS3 animations and a pinch of javascript:
CSS:

 .rotate { animation: rotate 10s; -webkit-animation: rotate 5s; } @keyframes rotate { 0% { transform: rotate(0deg); } 50% { transform: rotate(15deg); } 100% { transform: rotate(0deg); } } @-webkit-keyframes rotate { 0% { -webkit-transform: rotate(0deg); } 50% { -webkit-transform: rotate(15deg); } 100% { -webkit-transform: rotate(0deg); } } 

JavaScript:

 function shake(item) { item.className += "rotate"; } 

Answer 3

I think this will be a good candidate for CSS animation, as you can easily identify keywords:

 #foo { width: 50px; height: 50px; background-color: blue; position: relative; -webkit-animation: skewer .1s; } @-webkit-keyframes skewer { 0% { left: -15px; -webkit-transform: skewX(-15deg); } 25% { left: 0; -webkit-transform: skewX(0deg); } 55% { left: 15px; -webkit-transform: skewX(15deg); } 100% { left: 0px; -webkit-transform: skewX(0deg); } } 

http://jsfiddle.net/VGGqT/

However .animate accepts the step property if its second argument is an object:

 $(this).animate({ left: -15 }, { duration: 10, step: function (now) { $(this).css("-webkit-transform", "skewX(" + now + "deg)"); } }) 

You will need to do this for each individual stage of the animation, so it’s more detailed.

Answer 4

You should use the interval function, instead of using the for loop with a limit of 3. There are several ways to make the interval function in JS, you can use setInterval (?,?) And pass the function name, and the interval in milliseconds should do Trick

 setInterval(localFunction, 100); // 1 second setInterval(globalFunction(), 200); // 2 seconds 

try jQuery: setInterval