jquery div旋转问题

$('div').animate({rotate:'30deg'},1000);这是例子里的原话,但是我没有见过rotate这个属性而且也没有效果varpoper=new... $('div').animate({rotate: '30deg'},1000);这是例子里的原话,但是我没有见过rotate这个属性而且也没有效果
var poper=new Raphael('canvas_container',500,500);
var shape=poper.path('M 250 250 l 0 -50 ');
shape.attr({ rotation:90//没旋转效果});
2里面已经加载了raphael文件,但是1和2的旋转都是没有旋转效果的,请大神帮忙解答。
$('div').animate({rotate: '30deg'},1000);这是例子里的原话,但是我没有见过rotate这个属性而且也没有效果
var poper=new Raphael('canvas_container',500,500);var shape=poper.path('M 250 250 l 0 -50 ');
2里面已经加载了raphael文件,canvas_container为DIV的ID,但是1和2的旋转都是没有旋转效果的,请大神帮忙解答。shape.attr({ rotation:90//没旋转效果});
展开
 我来答
匿名用户
推荐于2018-02-26
展开全部

rotate这只是一个对jquery扩充的插件而已,你没有那个插件你写这个参数是无效的。你可以去下载rotate这个插件,要不你就用css3写如下:

$('#test').animate({  borderSpacing: -90 }, {    step: function(now,fx) {
     $(this).css('-webkit-transform','rotate('+now+'deg)');      
$(this).css('-moz-transform','rotate('+now+'deg)');      
$(this).css('-ms-transform','rotate('+now+'deg)');
     $(this).css('-o-transform','rotate('+now+'deg)');      
$(this).css('transform','rotate('+now+'deg)');      },
   duration:'slow' },'linear');
长城郭靖
2013-07-02 · TA获得超过729个赞
知道小有建树答主
回答量:1090
采纳率:47%
帮助的人:385万
展开全部
呵呵,旋转是CSS3的效果呀。不用jquery,总感觉这个写的有问题。还有就是不是所以的浏览器都支持CSS3
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
yugi111
推荐于2017-09-28 · TA获得超过8.1万个赞
知道大有可为答主
回答量:5.1万
采纳率:70%
帮助的人:1.3亿
展开全部
<!DOCTYPE HTML>
<html>
<head>
<meta charset=UTF-8>
<title>YuGiOh</title>
<style type="text/css">
#div {
position: absolute;
top: 50px;
left: 300px;
width: 300px;
height: 300px;
line-height: 300px;
text-align: center;
border: 1px solid black;
}
</style>
<script type="text/javascript">
var rotateHTML5 = function (limit)
    {
    var reg = /(rotate\([\-\+]?((\d+)(deg))\))/i;
    var wt = div.style['-webkit-transform'], wts = wt.match (reg);
    var $2 = RegExp.$2;
    console.log ($2);
    div.style['-webkit-transform'] = wt.replace ($2, parseFloat (RegExp.$3) + limit + RegExp.$4);
    }
    
    var rotateIE = function (obj)
    {
    var d = !!obj.d ? obj.d : 1;
    var r = d * Math.PI / 180;
    costheta = Math.cos (r);
    sintheta = Math.sin (r);
    obj.style.filter = "progid:DXImageTransform.Microsoft.Matrix()";
    var item = obj.filters.item (0);
    var width = obj.clientWidth;
    var height = obj.clientHeight;
    item.DX = -width / 2 * costheta + height / 2 * sintheta + width / 2;
    item.DY = -width / 2 * sintheta - height / 2 * costheta + height / 2;
    item.M11 = costheta;
    item.M12 = -sintheta;
    item.M21 = sintheta;
    item.M22 = costheta;
    obj.timer = setTimeout (function ()
    {
    var dx = d + 1;
    dx = dx > 360 ? 1 : dx;
    obj.d = dx;
    rotate (obj, dx);
    }, 30);
    };
    
    var start = function ()
    {
    if (!!div.interval)
    {
    clearInterval (div.interval);
    delete div.interval;
    }
    else
    {
    div.interval = setInterval (function ()
    {
    /.*webkit.*/i.test (navigator.userAgent) ? rotateHTML5 (1) : rotateIE (div);
    }, 30);
    }
    }
</script>
</head>
<body>
<button onclick="start();">rotate</button>
<div id="div" style="border-radius: 90px; -webkit-transform: rotate(10deg);">ROTATE</div>
</body>
</html>
本回答被提问者和网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
匿名用户
2013-07-02
展开全部
90deg 少了角度
追问
加上deg还是不管用。我就是在DW里面写的
shape.attr({
fill:'#9cf',-------------------有效果
'stroke-width':10,//外边宽度-------------------有效果
rotation:90//没旋转效果-------------------没效果
});
这是这句的原话
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
ncisttiantian
2013-07-02 · TA获得超过2820个赞
知道小有建树答主
回答量:1381
采纳率:20%
帮助的人:601万
展开全部
你浏览器是什么版本的?
追问
Ie9   
Chrome的是 27.0.1453.93
360的是6.2.1.106
火狐的是最新的
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 3条折叠回答
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式