css3 rotateX中的一个chrome bug in:before

我发现了一个有用的转变

windows7

，

chrome31.0.1650.57m

很好！但在：

windowxp

，

chrome1.0.1650.57m

或

chrome21.0.1180.89

奇怪的动画发生了

这是最重要的代码

.cl-effect-2 a span {
-webkit-transition: -webkit-transform 0.3s;
-moz-transition: -moz-transform 0.3s;
transition: transform 0.3s;
-webkit-transform-origin: 50% 0;
-moz-transform-origin: 50% 0;
transform-origin: 50% 0;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}

.cl-effect-2 a span::before {
-webkit-transition: background 0.3s;
-moz-transition: background 0.3s;
transition: background 0.3s;
-webkit-transform: rotateX(-90deg);
-moz-transform: rotateX(-90deg);
transform: rotateX(-90deg);
-webkit-transform-origin: 50% 0;
-moz-transform-origin: 50% 0;
transform-origin: 50% 0;
}

.cl-effect-2 a:hover span,
.cl-effect-2 a:focus span {
-webkit-transform: rotateX(90deg) translateY(-22px);
-moz-transform: rotateX(90deg) translateY(-22px);
transform: rotateX(90deg) translateY(-22px);
}

---

这是chrome中的一个bug吗？或者我怎么能修好它！谢谢！！！嗯，我在XP Chrome 31 inspector中的

元素中没有看到任何

：：before

或

：：after

元素。虽然Firefox工作得很好，但在XP Chrome 31中工作得很好。鼠标经过时，

span:：before

消失了。我在

之前找到了一个
.cstransforms3d
。cl-effect-2 a span:：before

，这似乎是导致问题的原因。从该规则中删除

.cstransforms3d

，XP Chrome 31将识别伪元素。