Question

我还要问另一个问题！

因此，CSS旋转在ie9中起作用，但在以前的版本中使用旋转将会是我的死！

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

这行代码将元素旋转90度，但与其他浏览器的原点大致相同。如果元素太靠近页面的一侧，它可能会旋转到外面。微软的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相同的方式处理旋转？

感谢。

我！

Answer 1

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

Source

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

Answer 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>

CSS旋转IE7和8

2 个答案: