首页 > 编程知识 正文

css 旋转中心,用css实现div旋转

时间:2023-05-04 02:32:29 阅读:241850 作者:791

要在IE中旋转45度,您需要样式表中的以下代码:filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475,

M21=0.7071067811865475, M22=0.7071067811865476); /* IE6,IE7 */-ms-filter: "progid:DXImageTransform.Microsoft

.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)";

/* IE8 */

您将从上面注意到,IE8的语法与IE6/7不同,如果要支持所有版本的IE,则需要提供这两行代码。

那些可怕的数字是以弧度表示的;如果你想使用45度以外的角度,你需要自己计算出这些数字。教程如果你在网上寻找他们)。

还请注意,由于过滤器字符串中未转义的冒号符号,IE6/7语法会给其他浏览器带来问题,这意味着它是无效的CSS。在我的测试中,这会导致Firefox忽略过滤器之后的所有CSS代码。这是你需要注意的事情,因为如果你被它抓住,它可能会造成数小时的混乱。我解决了这个问题,将IE特定的内容放在单独的样式表中,而其他浏览器并没有加载这些样式表。

所有其他当前浏览器(包括IE9和IE10-耶!)支持CSS 3transform样式(尽管通常带有供应商前缀),因此您可以使用以下代码在所有其他浏览器中实现相同的效果:-moz-transform: rotate(45deg);  /* FF3.5/3.6 */-o-transform: rotate(45deg);  /* Opera 10.5 */-webkit-transform: rotate(45deg);

/* Saf3.1+ */transform: rotate(45deg);  /* Newer browsers (incl IE9) */

希望能帮上忙。

编辑

由于这个答案仍在上升,我觉得我应该用一个名为JavaScript库的信息来更新它。CSS砂纸这允许您使用(接近)标准CSS代码进行轮转,即使在较旧的IE版本中也是如此。

将CSS沙纸添加到站点之后,您应该能够为IE6-8编写以下CSS代码:-sand-transform: rotate(40deg);

比传统的容易得多filter你通常需要在IE中使用的风格。

编辑

还请注意另一个特别适用于IE9(只支持IE9)的怪癖,它支持这两种标准。transform和老式IE-ms-filter..如果两者都指定了,这可能会导致IE9完全混淆,并且只呈现一个元素所在的坚实的黑匣子。这方面的最佳解决方案是避免使用filter风格采用上述砂纸填充。

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。