可以使用jQuery向当前的CSS值添加旋转吗？

Question

假设我在一页上有3个正方形div，其中一个旋转了-20度，一个旋转了-10度，另一个旋转了10度。当我将鼠标悬停在它们上面时，我希望它们旋转+ 10度。

在CSS中，似乎只能设置形状完成的位置，所以如果我将值设置为10度，第一个形状将移动30度，而最后一个形状根本不会移动。

有没有办法使用jQuery，让它从当前位置旋转10度？我不知道是否有任何方法可以将这些CSS值放入jQuery中，所以我可以添加10，然后作为旋转函数重新输出。

这是您要求的CSS。

.photo {

-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;

position: absolute;

}

.photo:hover {
cursor: pointer;
-webkit-transform:rotate(10deg);
-moz-transform:rotate(10deg);
-o-transform:rotate(10deg);
}

.image-1 {
-webkit-transform:rotate(-20deg);
-moz-transform:rotate(-20deg);
-o-transform:rotate(-20deg);

top: 60px;
left: 60px;
width: 260px;
height: 185px;

}

.image-2 {
-webkit-transform:rotate(-10deg);
-moz-transform:rotate(-10deg);
-o-transform:rotate(-10deg);

top: 60px;
left: 320px;
width: 280px;
height: 210px;

}

.image-3 {
-webkit-transform:rotate(10deg);
-moz-transform:rotate(10deg);
-o-transform:rotate(10deg);

top: 60px;
left: 600px;
width: 280px;
height: 185px;

}

这是我从第一个收到的答案中得到的

    var angle1 = 10;
var angle2 = 0;
var angle3 = -10;

$('.image-1').css('-webkit-transform','rotate('+angle1+'deg)');
$('.image-2').css('-webkit-transform','rotate('+angle2+'deg)');
$('.image-3').css('-webkit-transform','rotate('+angle3+'deg)'); 

$('.image-1').mouseover(function(){
angle1b = angle1 + 5;
$(this).css('-webkit-transform','rotate('+angle1b+'deg)');
});
$('.image-1').mouseout(function(){
$(this).css('-webkit-transform','rotate('+angle1+'deg)');
});

$('.image-2').mouseover(function(){
angle2b = angle2 + 5;
$(this).css('-webkit-transform','rotate('+angle2b+'deg)');
});
$('.image-2').mouseout(function(){
$(this).css('-webkit-transform','rotate('+angle2+'deg)');
});

$('.image-3').mouseover(function(){
angle3b = angle3 + 5;
$(this).css('-webkit-transform','rotate('+angle3b+'deg)');
});
$('.image-3').mouseout(function(){
$(this).css('-webkit-transform','rotate('+angle3+'deg)');
});

..。我意识到这是相当笨重的，我可能需要一个for？循环为每个image-1，image-2等执行相同的函数。我有一个快速的go，但我不太熟悉javascript。我猜这和“image”+i有关，但是我搞不清楚。如果有人能帮上忙，我将不胜感激。然后我所要改变的就是初始变量。

Answer 1

这只是一个简单的草图：

var angle1 = -20;
var angle2 = -10;
var angle3 = 10;

$('.image-1').click(function(){
    angle1 = angle1 + 10;
    $(this).css('-webkit-transform','rotate('+angle1+'deg)');
});

等。

Answer 2

因为你知道原始的角度，你可以用纯CSS实现这一点，使用':hover‘。你只需要手动将每个image-n类的角度设置为比未悬停的多10度，例如，.image-1有transform:rotate(-20deg);，因此将.image-1:hover设置为transform:rotate(-10deg);。

你也可以将过渡添加到未悬停的版本，这样当你鼠标移出时，你就会得到一个很好的动画。

我试着按照你的建议使用jQuery做一些更动态的事情，但是转换css的存储方式不仅仅是-10deg，而是一个矩阵，所以这将很难做到。

下面是更新后的CSS，其中包含一个有效的代码片段。我对此所做的唯一其他更改是为清晰起见添加了背景色，并添加了非特定于供应商的transition CSS：

​

.photo {
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    position: absolute;
}

.photo:hover {
    cursor: pointer;
    -webkit-transform:rotate(10deg);
    -moz-transform:rotate(10deg);
    -o-transform:rotate(10deg);
}

.image-1 {
    -webkit-transform:rotate(-20deg);
    -moz-transform:rotate(-20deg);
    -o-transform:rotate(-20deg);
    transform:rotate(-20deg);
    top: 60px;
    left: 60px;
    width: 260px;
    height: 185px;
    background-color:red;
}

.image-2 {
    -webkit-transform:rotate(-10deg);
    -moz-transform:rotate(-10deg);
    -o-transform:rotate(-10deg);
    transform:rotate(-10deg);
    top: 60px;
    left: 320px;
    width: 280px;
    height: 210px;
    background-color:green;
}

.image-3 {
    -webkit-transform:rotate(10deg);
    -moz-transform:rotate(10deg);
    -o-transform:rotate(10deg);
    transform:rotate(10deg);
    top: 60px;
    left: 600px;
    width: 280px;
    height: 185px;
    background-color:blue;
}

/* apply a transition to all images for when you come off the hover */
.image-1, .image-2, .image-3 {
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}

/* for each image set the hover angle to 10 more than the previous  */

.image-1:hover {
    -webkit-transform:rotate(-10deg);
    -moz-transform:rotate(-10deg);
    -o-transform:rotate(-10deg);
    transform:rotate(-10deg);
}

.image-2:hover {
    -webkit-transform:rotate(0);
    -moz-transform:rotate(0);
    -o-transform:rotate(0);
    transform:rotate(0);
}

.image-3:hover {
    -webkit-transform:rotate(20deg);
    -moz-transform:rotate(20deg);
    -o-transform:rotate(20deg);
    transform:rotate(20deg);
}

<div id="a1" class="image-1">Image 1</div>
<div id="a2" class="image-2">Image 2</div>
<div id="a3" class="image-3">Image 3</div>

​