尝试旋转div元素...这可能是DOM亵渎,它是否可以与canvas元素一起使用?我不确定-如果有人对它如何工作或为什么不起作用有任何想法,我很想知道。谢谢。
要旋转DIV,请使用WebkitTransform / -moz-transform: rotate(Xdeg)
。
这在IE中不起作用。Raphael库可以与IE一起使用,并且可以旋转。我相信它使用canvas
es
如果要为旋转设置动画,则可以使用递归 setTimeout()
您甚至可以使用jQuery进行部分旋转 .animate()
确保您考虑了元素的宽度。如果旋转的宽度大于其可见内容的宽度,则会得到有趣的结果。但是,您可以缩小元素的宽度,然后旋转它们。
这是一个简单的jQuery代码片段,可旋转jQuery对象中的元素。旋转可以启动和停止:
$(function() {
var $elie = $(selectorForElementsToRotate);
rotate(0);
function rotate(degree) {
// For webkit browsers: e.g. Chrome
$elie.css({ WebkitTransform: 'rotate(' + degree + 'deg)'});
// For Mozilla browser: e.g. Firefox
$elie.css({ '-moz-transform': 'rotate(' + degree + 'deg)'});
// Animate rotation with a recursive call
setTimeout(function() { rotate(++degree); },5);
}
});
jsFiddle示例
注意:
获取并增加度数,将顺时针旋转图像。降低旋转度将使图像逆时针旋转。
是的,我想你不会有太多的运气。我认为,通常在主要浏览器使用的3种绘制方法(画布,SVG,VML)中,文本支持都很差。如果要旋转图像,那一切都很好,但是如果您将内容与格式和样式混合在一起,则可能不会。
请查看RaphaelJS以获取跨浏览器绘图API。
跨浏览器旋转的任何元素。可在IE7和IE8中使用。在IE7中,似乎无法在JSFiddle中工作,但在我的项目中,也可在IE7中工作
var elementToRotate = $('#rotateMe');
var degreeOfRotation = 33;
var deg = degreeOfRotation;
var deg2radians = Math.PI * 2 / 360;
var rad = deg * deg2radians ;
var costheta = Math.cos(rad);
var sintheta = Math.sin(rad);
var m11 = costheta;
var m12 = -sintheta;
var m21 = sintheta;
var m22 = costheta;
var matrixValues = 'M11=' + m11 + ', M12='+ m12 +', M21='+ m21 +', M22='+ m22;
elementToRotate.css('-webkit-transform','rotate('+deg+'deg)')
.css('-moz-transform','rotate('+deg+'deg)')
.css('-ms-transform','rotate('+deg+'deg)')
.css('transform','rotate('+deg+'deg)')
.css('filter', 'progid:DXImageTransform.Microsoft.Matrix(sizingMethod=\'auto expand\','+matrixValues+')')
.css('-ms-filter', 'progid:DXImageTransform.Microsoft.Matrix(SizingMethod=\'auto expand\','+matrixValues+')');
Edit 13/09/13 15:00包装在一个漂亮,简单,可链接的jquery插件中。
使用例
$.fn.rotateElement = function(angle) {
var elementToRotate = this,
deg = angle,
deg2radians = Math.PI * 2 / 360,
rad = deg * deg2radians ,
costheta = Math.cos(rad),
sintheta = Math.sin(rad),
m11 = costheta,
m12 = -sintheta,
m21 = sintheta,
m22 = costheta,
matrixValues = 'M11=' + m11 + ', M12='+ m12 +', M21='+ m21 +', M22='+ m22;
elementToRotate.css('-webkit-transform','rotate('+deg+'deg)')
.css('-moz-transform','rotate('+deg+'deg)')
.css('-ms-transform','rotate('+deg+'deg)')
.css('transform','rotate('+deg+'deg)')
.css('filter', 'progid:DXImageTransform.Microsoft.Matrix(sizingMethod=\'auto expand\','+matrixValues+')')
.css('-ms-filter', 'progid:DXImageTransform.Microsoft.Matrix(SizingMethod=\'auto expand\','+matrixValues+')');
return elementToRotate;
}
$element.rotateElement(15);
JSFiddle:http : //jsfiddle.net/RgX86/175/
这是两个有助于解决问题的jQuery补丁(在您阅读本文时,它们可能已经包含在jQuery中):
我怀疑您可以使用DOM / CSS旋转元素。最好的选择是渲染到画布上并将其旋转(不确定具体细节)。
编辑:为jQuery 1.8更新
jQuery 1.8将添加浏览器特定的转换。jsFiddle演示
var rotation = 0;
jQuery.fn.rotate = function(degrees) {
$(this).css({'transform' : 'rotate('+ degrees +'deg)'});
return $(this);
};
$('.rotate').click(function() {
rotation += 5;
$(this).rotate(rotation);
});
编辑:添加了使其成为jQuery函数的代码。
对于那些不想进一步阅读的人,请继续。有关更多详细信息和示例,请继续阅读。jsFiddle演示。
var rotation = 0;
jQuery.fn.rotate = function(degrees) {
$(this).css({'-webkit-transform' : 'rotate('+ degrees +'deg)',
'-moz-transform' : 'rotate('+ degrees +'deg)',
'-ms-transform' : 'rotate('+ degrees +'deg)',
'transform' : 'rotate('+ degrees +'deg)'});
return $(this);
};
$('.rotate').click(function() {
rotation += 5;
$(this).rotate(rotation);
});
编辑:这篇文章的评论之一提到jQuery Multirotation。jQuery的这个插件本质上执行了上述功能,并支持IE8。如果您想要最大的兼容性或更多选择,可能值得使用。但是为了最小的开销,我建议使用上述功能。它可以在IE9 +,Chrome,Firefox,Opera等众多平台上运行。
Bobby ...这是供那些实际上想要在javascript中做到的人使用的。这可能是在javascript回调上旋转所需的。
这是一个jsFiddle。
如果您想按自定义间隔旋转,则可以使用jQuery手动设置css而不是添加类。像这样!我在答案的底部都包含了两个jQuery选项。
的HTML
<div class="rotate">
<h1>Rotatey text</h1>
</div>
的CSS
/* Totally for style */
.rotate {
background: #F02311;
color: #FFF;
width: 200px;
height: 200px;
text-align: center;
font: normal 1em Arial;
position: relative;
top: 50px;
left: 50px;
}
/* The real code */
.rotated {
-webkit-transform: rotate(45deg); /* Chrome, Safari 3.1+ */
-moz-transform: rotate(45deg); /* Firefox 3.5-15 */
-ms-transform: rotate(45deg); /* IE 9 */
-o-transform: rotate(45deg); /* Opera 10.50-12.00 */
transform: rotate(45deg); /* Firefox 16+, IE 10+, Opera 12.10+ */
}
jQuery的
确保将它们包装在$ {document).ready中
$('.rotate').click(function() {
$(this).toggleClass('rotated');
});
自定义间隔
var rotation = 0;
$('.rotate').click(function() {
rotation += 5;
$(this).css({'-webkit-transform' : 'rotate('+ rotation +'deg)',
'-moz-transform' : 'rotate('+ rotation +'deg)',
'-ms-transform' : 'rotate('+ rotation +'deg)',
'transform' : 'rotate('+ rotation +'deg)'});
});
我整理了一个动画旋转代码程序..您可以在这里获取代码...(如果不晚的话)
文章标签:ajax , canvas , dom , jquery , jquery-animate
版权声明:本文为原创文章,版权归 admin 所有,欢迎分享本文,转载请保留出处!
评论已关闭!