Question

为什么这不起作用？我需要它用于学校项目。应该很简单。

var Rotate = function(d){
  $(".fab").css({
      '-webkit-transition-duration: 1s; /* Safari */',
      'transition-duration: 1s;',
      '-moz-transform':'rotate('+d+'deg)',
      '-webkit-transform':'rotate('+d+'deg)',
      '-o-transform':'rotate('+d+'deg)',
      '-ms-transform':'rotate('+d+'deg)',
      'transform': 'rotate('+d+'deg)'
   });
}

Answer 1

var Rotate = function(d){
  $(".fab").css({
      '-webkit-transition-duration': 1s,
      'transition-duration': 1s,
      '-moz-transform':'rotate('+d+'deg)',
      '-webkit-transform':'rotate('+d+'deg)',
      '-o-transform':'rotate('+d+'deg)',
      '-ms-transform':'rotate('+d+'deg)',
      'transform': 'rotate('+d+'deg)'
   });
}

所以使用字符串

'-webkit-transition-duration: 1s; /* Safari */',
'transition-duration: 1s;',

改为使用您用于transform或rotate的键值对：

'-webkit-transition-duration': 1s,
'transition-duration': 1s,

Answer 2

AKS的答案包含了您的语法错误，但您尝试使用转换属性的方式不正确。您需要先定义转换，然后执行一些css更改以触发转换。从您向我们展示的内容来看，您只有触发器部件。

您可以使用的一些基本CSS是

.fab {
    -webkit-transition-duration: 1s;
    transition-duration: 1s;
}

您的JavaScript变为

var Rotate = function(d){
    $(".fab").css({
        '-moz-transform':'rotate('+d+'deg)',
        '-webkit-transform':'rotate('+d+'deg)',
        '-o-transform':'rotate('+d+'deg)',
        '-ms-transform':'rotate('+d+'deg)',
        'transform': 'rotate('+d+'deg)'
    });
}

请注意，这将为可以使用转换的任何属性执行转换，因此您可能希望使用transition: transform 1s;作为CSS来更具体。

您可以更多地了解转型here。另外here是一个工作小提琴

旋转功能

2 个答案: