我以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;
}
你明白了:)
希望这可以帮助!