可以使用jQuery将旋转添加到当前css值中吗

Can you add rotation to the current css values using jQuery?

本文关键字：css jQuery 旋转 添加 可以使      更新时间：2023-09-26

例如，我在一页上有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？循环为每个图像-1、图像-2等执行相同的功能。我快速尝试了一下，但我对javascript不太熟悉。我的猜测是，这与"图像"+i有关，但我不明白。如果有人能帮忙，我们将不胜感激。然后我所要改变的就是初始变量。

只是一个快速草图：

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

等等。

正如您所知道的原始角度，您可以使用纯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>

相关文章：