Question

我有一个div：

  <div>This text rotates upon page refresh</div>

我试图找出如何在页面刷新时使文本在div内旋转;但是，我不想使用任何类型的jquery插件来实现它。

如果我有以下jQuery代码：

 jQuery.fn.rotate = function(degrees) {
     $(div).css({'-webkit-transform' : 'rotate('+ degrees +'deg)',
             '-moz-transform' : 'rotate('+ degrees +'deg)',
             '-ms-transform' : 'rotate('+ degrees +'deg)',
             'transform' : 'rotate('+ degrees +'deg)'});
     return $(this);
  };

如何在jquery中指定它是我要旋转的文本而不是div。我试图在不使用标签的情况下实现这一目标。

Answer 1

您需要一些javascript，但这里有一个小提琴：https://jsfiddle.net/aLk8vfto/2/

和js代码：

(function() {
  document.getElementById('info').className += 'rotate';
})();

的CSS：

div
{
  -webkit-transition-duration: 0.8s;
  -moz-transition-duration: 0.8s;
  -o-transition-duration: 0.8s;
  transition-duration: 0.8s;

  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  -o-transition-property: -o-transform;
  transition-property: transform;

  overflow:hidden;
  padding: 50px;
}
.rotate
{
  -ms-transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
}

如何在不使用jQuery的情况下使文本在页面刷新内旋转？

1 个答案: