I want to rotate an element by pressing space bar, like a tetris effect. But so far I can only rotate it once, and the position()method doesn't seem to work like it does when using keys to move sideways. Any help or hint would be appreciated. Here's what I have:
$(document).ready(function() {
$(document).on('keydown', function(e) {
var keyCode = e.keyCode;
var div = $("#div");
e.preventDefault();
if (keyCode === 37) div.css("left", (div.position().left - 1) + "px");
if (keyCode === 39) div.css("left", (div.position().left + 1) + "px");
if (keyCode === 32) div.css('transform','rotate(-90deg)');
});
Your rotate property is always -90px. I would have a variable that keeps track of the 'rotation' starting at 0. Then subtracting -90 on every space press. Keep in mind not go over 360, instead reset back to 0.
$(document).ready(function() {
var rotation = 0;
$(document).on('keydown', function(e) {
var keyCode = e.keyCode;
var div = $("#div");
e.preventDefault();
if (keyCode === 37) div.css("left", (div.position().left - 1) + "px");
if (keyCode === 39) div.css("left", (div.position().left + 1) + "px");
if (keyCode === 32) {
rotation -= 90;
if (rotation < -360)
rotation = 0;
div.css('transform','rotate('+rotation+'deg)');
}
});
});#div {
border: 1px solid #CCC;
width: 100px;
height: 50px;
text-align: center;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div">test</div>