使用jquery或javascript改变变换角度

Question

一个.rotdiv有transform:rotateX(0deg) rotateY(0deg)。我想根据.x-inc, .x-dec, .y-inc, .y-dec的4个按钮增加或减少旋转x或y，但当我做rot.css("transform")时，它给了我矩阵形式，不是字符串或度。现在我该如何根据点击按钮来改变这些旋转呢?

Answer 1

您可以通过多种方式进行操作，但这里有一个简单的fiddle，它向您展示了三种方法。

1. 添加45度类

2. 直接调用变换

3. 创建一个函数并传递一个数字

JS

$('.clickme1').on('click', function(){
     $('.rotateme').addClass( 'rotatemenow' );
});
$('.clickme2').on('click', function(){
    $('.rotateme').css( 'transform', 'rotate(45deg)');
});
$('.45degrees').on('click', function(){
    spinabox(45);
});
$('.60degrees').on('click', function(){
    spinabox(60);
});
function spinabox (angle)
{
    $('.rotateme').css( 'transform', 'rotate(' + angle + 'deg)');
}