我们可以使用 += 来 transform:rotate( 'x'deg); css 属性通过 Javascript

Question

这是我的代码：

#move{
 height:70px;
 width:70px;
 border:2px solid black;
    border-radius:15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

  <input type="button" value="Move Right" onclick="
  $('#move').css({'background-color':'aqua'});
  $('#move').css({'position':'absolute',
                               'transition':'500ms ease-in-out',
                               'right':'-=50px',
                               'transform':'rotate(+=5deg)'});
  "></input>
        
        <br>
        OBJECT
        <br>
  <div id="move"></div>

我的问题是这样的：

是否可以通过将 += 等运算符添加到 [=18] 来使我的 div 每次单击按钮 "MOVE RIGHT" 时移动并旋转 +5 度=] 中的值 CSS 属性，像这样：

'transform':'rotate(+=5deg)'

Answer 1

请注意 transform 属性可以有不同的值，这些值不可交换。例如，以下值会产生不同的结果：

transform: translateX(100px) rotate(90deg); /* This is different... */
transform: rotate(90deg) translateX(100px); /* ... than this!       */

.box {
  height: 100px;
  width: 100px;
  background: red;
}
#box1 {
  transform: translateX(100px) rotate(90deg);
}
#box2 {
  transform: rotate(90deg) translateX(100px);
}

<div class="box" id="box1"></div>
<div class="box" id="box2"></div>

有人可能认为旋转 45deg 会是

transform: translateX(100px) rotate(135deg); /* OK    */
transform: rotate(135deg) translateX(100px); /* FAIL! */

.box {
  height: 100px;
  width: 100px;
  background: red;
}
#box1 {
  transform: translateX(100px) rotate(135deg);
}
#box2 {
  transform: rotate(135deg) translateX(100px);
}

<div class="box" id="box1"></div>
<div class="box" id="box2"></div>

但是，这仅适用于第一个示例，因为 rotate 是最后一个转换函数。一般来说，正确的方法是

transform: translateX(100px) rotate(90deg) rotate(45deg); /* OK */
transform: rotate(90deg) translateX(100px) rotate(45deg); /* OK */

.box {
  height: 100px;
  width: 100px;
  background: red;
}
#box1 {
  transform: translateX(100px) rotate(90deg) rotate(45deg);
}
#box2 {
  transform: rotate(90deg) translateX(100px) rotate(45deg);
}

<div class="box" id="box1"></div>
<div class="box" id="box2"></div>

然后，你可以添加这个方法：

$.fn.addTransform = function(val) {
  return this.each(function() {
    var tr = $(this).css('transform');
    if(tr === 'none') tr = '';
    $(this).css('transform', tr + ' ' + val);
  });
};

并像

一样使用它

$('#move').addTransform('rotate(5deg)');

$.fn.addTransform = function(val) {
  return this.each(function() {
    var tr = $(this).css('transform');
    if(tr === 'none') tr = '';
    $(this).css('transform', tr + ' ' + val);
  });
};
$('input').click(function() {
  $('#move').css({
    backgroundColor: 'aqua',
    position: 'absolute',
    transition: '500ms ease-in-out',
    right: '-=50px'
  }).addTransform('rotate(5deg)');
});

#move {
  height: 70px;
  width: 70px;
  border: 2px solid black;
  border-radius: 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="button" value="Move Right" />
<div id="move"></div>

我们可以使用 += 来 transform:rotate( 'x'deg); css 属性通过 Javascript

Can we use += to transform:rotate( 'x'deg); css property via Javascript

javascript

jquery

css

transform

我们可以使用 += 来 transform:rotate( 'x'deg); css 属性 通过 Javascript

Can we use += to transform:rotate( 'x'deg); css property via Javascript

javascript

jquery

css

transform

我们可以使用 += 来 transform:rotate( 'x'deg); css 属性通过 Javascript