javascript - 我们可以使用 += 来转换 :rotate( 'x' deg); css property via 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>

我的问题是这样的:

是否可以通过将 += 之类的运算符添加到 rotate 值，如下所示:

'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>