My goal is to develop a function that allows a #div element to tilt 15 degrees to the left upon clicking, and then return to its original position shortly after. I believe this can be achieved by incorporating a timing event into the solution. However, the actual tilting effect is proving to be the most challenging aspect. While I prefer utilizing JavaScript alone for this task, I am also open to using jQuery or CSS3.
During my attempt at creating a custom shake effect, I utilized the following code snippet:
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;
}
However, this code snippet only creates a horizontal or vertical shaking effect and not a 'tilt' effect as desired. I suspect that incorporating CSS3 may be necessary to achieve the tilt effect. Any suggestions on how to proceed?
DISCLAIMER: Ideally, I am seeking a JavaScript-based solution that will be compatible with IE 9+ and modern browsers such as Chrome, Firefox, and Safari. Otherwise, implementing the feature would be futile. Thank you.