CSS 旋转 IE7 和 8答案

【问题标题】：CSS Rotate IE7 and 8CSS 旋转 IE7 和 8
【发布时间】：2012-03-08 11:16:29
【问题描述】：

我要再问一个问题！

所以，CSS Rotate 在 ie9 中工作，但在以前的版本中让旋转工作将是我的死！

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);

这行代码将元素旋转了 90 度，但与其他浏览器的原点相同。如果元素太靠近页面的一侧，它可能会被旋转到外面。 Microsoft 的 IE 文档没有明确说明如何设置转换原点。

我的完整代码是：

#quick {
    position:fixed;
    top:250px;
    left:-158px;
}
#qmenu-wrapper {
    background-image: url(../images/img_08.png);
    background-repeat:repeat-x;
    height: 35px;
    width:350px;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform:rotate(90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);

}

我们可以做些什么来让 IE 7 和 8 以与 9 相同的方式处理旋转？

谢谢。

我！

【问题讨论】：

您可能想考虑尝试 jQuery 旋转：code.google.com/p/jqueryrotate
CSS rotate property in IE的可能重复

标签： css

【解决方案1】：

IE5.5, IE6, IE7 和 IE8 支持filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); IE5不支持！

Source

要使用 DX 过滤器更改旋转原点，只需使用Matrix 过滤器来更改元素的位置。您可以在一个元素上设置多个过滤器。你需要做一些数学运算。祝你好运！

【讨论】：

【解决方案2】：

看看this site左边的标题。我通过使用overflow:visible 将项目放置在一个较小的元素中并旋转该元素来解决旋转点问题。换句话说，我建立了自己的支点。

在该示例中，我还使用写作模式来旋转 IE 中的文本，因为使用过滤器会禁用字体平滑。

<style type="text/css">
/* This wrapper is required to rotate the text around the left edge */

#page_title {
overflow: visible;
position: absolute;
width: 38px;
-moz-transform: rotate(90deg);
-moz-rotation-point: 0 0;
-webkit-transform: rotate(90deg);
-webkit-rotation-point: 0 0;
-o-transform: rotate(90deg);
-ms-writing-mode: tb-lr;
* html writing-mode: tb-lr;
}

#page_title h1 {
display: block;
font-size: 70px;
font-weight: normal;
line-height: 38px;
color: #F3C1E0;
font-variant: small-caps;
width: auto;
}
</style>

<div id="page_title">
<h1>Inwardpath&nbsp;Publishers</h1>
</div>

【讨论】：