ベーコンと呼ばれるdivを90度回転させるボタンがあります。
ボタンを 1 回押すと、コードが機能し、div が 90 度回転します。
ボタンをもう一度押すと、それ以上何も起こりません。
$("#button").on("click", function () {
$("#bacon").css({
'-moz-transform':'rotate(90deg)',
'-webkit-transform':'rotate(90deg)',
'-o-transform':'rotate(90deg)',
'-ms-transform':'rotate(90deg)',
'transform':'rotate(90deg)'
});
});
上記のコードでやりたいことは、無限に回転し続けることができるようにすることです。1 回押すとベーコンが元の位置から 90 度回転し、2 回押すと元の位置から 180 度回転し、3 回押すと元の位置から 270 度回転します。
ありがとう。
*編集：反時計回りを除い#button2て同じことを行う2番目のボタンがあります。#button押す#buttonと90度に#button2なり、元に戻すと、押す#buttonと再び90度になります。
基本的に、ボタンを押した後はもう一方のボタンのみが機能するため、4 つの状態すべてを完全に回転させるのではなく、2 つの状態を交互に切り替えることしかできません。