Quiero rotar un elemento presionando la barra espaciadora, como un efecto tetris. Pero hasta ahora solo puedo girarlo una vez, y el método position() no parece funcionar como lo hace cuando se usan las teclas para moverse hacia los lados. Cualquier ayuda o sugerencia sería apreciada. Esto es lo que tengo:
$(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)'); });Su propiedad de rotación siempre es -90px . Tendría una variable que realiza un seguimiento de la 'rotación' comenzando en 0. Luego restando -90 en cada espacio presionado. Tenga en cuenta que no pase de 360, en su lugar, reinicie de nuevo a 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>