Question

我在IE 10-11上使用CSS 3d转换时出现问题这是我简单的HTML结构：

<ul>
    <li>Item 1</li>
    ...
    <li>Item 12</li>
</ul>

关注CSS：

ul {  
    white-space: nowrap;
    overflow: auto;
    transform: rotateY(180deg);
}
li {
    display: inline-block;
    transform: rotateY(180deg);
}

这是JS Fiddle

问题在于我无法在IE中使用:hover设置列表项目 - 它们几乎不会突出显示如果我们将溢出设置为hidden/visible，或者我们将删除任何transform - 那么:hover将会执行。

另外，在其他浏览器中效果很好而且，这与transform-style: preserve-3d

无关

什么可以解决这个问题？

Answer 1

经过很长一段时间，我在上下文中找到了解决问题的方法。

问题是我们还有另一种方法可以从右到左旋转元素：

transform: scale(-1, 1);

这种方法使用2d变换而不是3d。这解决了IE中的问题。

JSFiddle - Fixed for IE

但是如果你试图在Chrome （我使用的是版本42 dev-m）中打开上面的小提琴 - 你会看到错误的渲染滚动条。要解决此问题 - 只需为您旋转的所有元素添加零翻译（将此元素移动到单独的图层上）

transform: scale(-1, 1) translate3d(0,0,0);

JSFiddle - Fixed for Chrome

但是，这又会在IE中返回问题！ 所以我不得不在这里使用浏览器检测

P.S。但IE渲染引擎中的错误仍然有效。这只是   针对特定问题的解决方法。

P.S.S。还有Chrome渲染引擎中的错误

IE10 +嵌套3d转换内溢：auto是制动：悬停行为

1 个答案: