卡翻转过渡在 IE 中无法正常工作

Question

我为AngularJS在JSFiddle中做了一个卡片翻转的例子。

它在Chrome中完美运行。它在火狐中工作正常。它在IE中工作，但不正确。

一旦我删除透视 css 规则，它就可以完美运行（没有透视）。 如果我添加 -webkit- 和 -ie- 规则，它仍然不起作用。这是一个错误我即。

我已经使用 ng-enter 和 ng-leave 来进行转换等。 检查 JSFiddle 以获取完整代码。

.serviceRoll{
    margin:32px;
    position: relative;
    height:150px;
    width:215px;
    perspective:800px;
}
.rollInner {
    background-color:lightgrey;
    padding-top:50px;
    height:100px;
    width:215px;
    text-align:center;
    font-size:2em;
    border-radius: 16px;
}
.roll {
    position: absolute;
}
.roll.ng-enter {
    -webkit-transition:0.25s ease all;
    transition:0.25s ease all;
    -webkit-transform: rotateX(-90deg);
    transform: rotateX(-90deg);
    z-index: 1;
}
.roll.ng-enter.ng-enter-active {
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg);
    -webkit-transition-delay: 0.25s;
    transition-delay: 0.25s;
}
.roll.ng-leave {
    -webkit-transition:0.25s ease all;
    transition:0.25s ease all;
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg);
    z-index: -1;
}
.roll.ng-leave.ng-leave-active {
    -webkit-transform: rotateX(90deg);
    transform: rotateX(90deg);
}

Answer 1

如果你有 -webkit- 也为 -ms- 添加一个 css 规则。您已为 webkit 浏览器添加了这些规则，但未为非 webkit 浏览器添加了这些规则。以一些 css 规则为例。像这样的东西——

.roll.ng-enter {
    -webkit-transition:0.25s ease all;
    -ms-transition:0.25s ease all;
    transition:0.25s ease all;
    -ms-transform: rotateX(-90deg);
    -webkit-transform: rotateX(-90deg);
    transform: rotateX(-90deg);
    z-index: 1;
}
.roll.ng-enter.ng-enter-active {
    -webkit-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    transform: rotateX(0deg);
    -webkit-transition-delay: 0.25s;
    -ms-transition-delay: 0.25s;
    transition-delay: 0.25s;
}
.roll.ng-leave {
    -webkit-transition:0.25s ease all;
    -ms-transition:0.25s ease all;
    transition:0.25s ease all;
    -webkit-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    transform: rotateX(0deg);
    z-index: -1;
}

你明白了:)希望这有帮助！