使用jquery或javascript更改变换角度

Question

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

Answer 1

你可以通过各种方式做到这一点，但这里有一个简单的小提琴，向你展示三个 - FIDDLE

1. 添加45degree类

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)');
}