猿问

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

想要使用jquery实现每点击一次旋转90度？该怎么做？

$(document).ready(function(){
$("input").click(function(){
$("#parent").animate({
-webkit-transform:"rotateY(+=90deg)" //就是这行代码，应该怎么写？
});
});
});

交互式爱情
浏览 308回答 2
2回答

胡子哥哥

<!DOCTYPE&nbsp;HTML><html><head><meta&nbsp;charset=UTF-8><title>YuGiOh</title><style&nbsp;type="text/css">#div&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;position:&nbsp;absolute;&nbsp;&nbsp;&nbsp;&nbsp;top:&nbsp;50px;&nbsp;&nbsp;&nbsp;&nbsp;left:&nbsp;300px;&nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;300px;&nbsp;&nbsp;&nbsp;&nbsp;height:&nbsp;300px;&nbsp;&nbsp;&nbsp;&nbsp;line-height:&nbsp;300px;&nbsp;&nbsp;&nbsp;&nbsp;text-align:&nbsp;center;&nbsp;&nbsp;&nbsp;&nbsp;border:&nbsp;1px&nbsp;solid&nbsp;black;}</style><script&nbsp;type="text/javascript"&nbsp;src="jquery-1.8.0.min.js"></script><script&nbsp;type="text/javascript">&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;rotateHTML5&nbsp;=&nbsp;function&nbsp;(limit)&nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;reg&nbsp;=&nbsp;/(rotate\([\-\+]?((\d+)(deg))\))/i;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;wt&nbsp;=&nbsp;div.style['-webkit-transform'],&nbsp;wts&nbsp;=&nbsp;wt.match&nbsp;(reg);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;$2&nbsp;=&nbsp;RegExp.$2;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log&nbsp;($2);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;div.style['-webkit-transform']&nbsp;=&nbsp;wt.replace&nbsp;($2,&nbsp;parseFloat&nbsp;(RegExp.$3)&nbsp;+&nbsp;limit&nbsp;+&nbsp;RegExp.$4);&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;rotateIE&nbsp;=&nbsp;function&nbsp;(obj)&nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;d&nbsp;=&nbsp;!!obj.d&nbsp;?&nbsp;obj.d&nbsp;:&nbsp;1;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;r&nbsp;=&nbsp;d&nbsp;*&nbsp;Math.PI&nbsp;/&nbsp;180;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;costheta&nbsp;=&nbsp;Math.cos&nbsp;(r);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sintheta&nbsp;=&nbsp;Math.sin&nbsp;(r);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;obj.style.filter&nbsp;=&nbsp;"progid:DXImageTransform.Microsoft.Matrix()";&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;item&nbsp;=&nbsp;obj.filters.item&nbsp;(0);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;width&nbsp;=&nbsp;obj.clientWidth;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;height&nbsp;=&nbsp;obj.clientHeight;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;item.DX&nbsp;=&nbsp;-width&nbsp;/&nbsp;2&nbsp;*&nbsp;costheta&nbsp;+&nbsp;height&nbsp;/&nbsp;2&nbsp;*&nbsp;sintheta&nbsp;+&nbsp;width&nbsp;/&nbsp;2;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;item.DY&nbsp;=&nbsp;-width&nbsp;/&nbsp;2&nbsp;*&nbsp;sintheta&nbsp;-&nbsp;height&nbsp;/&nbsp;2&nbsp;*&nbsp;costheta&nbsp;+&nbsp;height&nbsp;/&nbsp;2;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;item.M11&nbsp;=&nbsp;costheta;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;item.M12&nbsp;=&nbsp;-sintheta;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;item.M21&nbsp;=&nbsp;sintheta;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;item.M22&nbsp;=&nbsp;costheta;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;obj.timer&nbsp;=&nbsp;setTimeout&nbsp;(function&nbsp;()&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;dx&nbsp;=&nbsp;d&nbsp;+&nbsp;1;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dx&nbsp;=&nbsp;dx&nbsp;>&nbsp;360&nbsp;?&nbsp;1&nbsp;:&nbsp;dx;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;obj.d&nbsp;=&nbsp;dx;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;rotate&nbsp;(obj,&nbsp;dx);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},&nbsp;30);&nbsp;&nbsp;&nbsp;&nbsp;};&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;start&nbsp;=&nbsp;function&nbsp;()&nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(!!div.interval)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;clearInterval&nbsp;(div.interval);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;delete&nbsp;div.interval;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;div.interval&nbsp;=&nbsp;setInterval&nbsp;(function&nbsp;()&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/.*webkit.*/i.test&nbsp;(navigator.userAgent)&nbsp;?&nbsp;rotateHTML5&nbsp;(1)&nbsp;:&nbsp;rotateIE&nbsp;(div);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},&nbsp;30);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;}</script></head><body>&nbsp;&nbsp;&nbsp;&nbsp;<button&nbsp;onclick="start();">rotate</button>&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;id="div"&nbsp;style="border-radius:&nbsp;90px;&nbsp;-webkit-transform:&nbsp;rotate(10deg);">ROTATE</div></body></html>
0

呼如林

直接改css 不需要animate
0
打开App，查看更多内容
随时随地看视频慕课网APP

相关分类

JQuery