我以AngularJS在JSFiddle中的卡片翻转为例。

它在Chrome中完美运行。
在Firefox中可以正常工作。
它在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);
}

最佳答案

您在拥有-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;
}


你明白了:)
希望这可以帮助!

10-05 21:01
查看更多