Angularjs CSS转换无法正常工作
我有个奇怪的问题。我有一个CSS翻转动画和两个图像 问题是,在第一次转换时,首先隐藏的图像不会很好地转换,而是在转换结束时立即显示 但是,在第一次转换后,问题消失,并在之后正常工作 虽然应用程序是用angularjs编写的,但我认为这是一个CSS问题。我怎样才能解决这个问题 我制作了一把小提琴,希望能解释这个问题: Html:Angularjs CSS转换无法正常工作,angularjs,css,css-animations,Angularjs,Css,Css Animations,我有个奇怪的问题。我有一个CSS翻转动画和两个图像 问题是,在第一次转换时,首先隐藏的图像不会很好地转换,而是在转换结束时立即显示 但是,在第一次转换后,问题消失,并在之后正常工作 虽然应用程序是用angularjs编写的,但我认为这是一个CSS问题。我怎样才能解决这个问题 我制作了一把小提琴,希望能解释这个问题: Html: 你忘了把preserve-3d放在后面的图像中如果你简单地添加背景色:initial,也有点奇怪到.card img,它也解决了这个问题。是的,一个问题有很多解决方案
你忘了把preserve-3d放在后面的图像中如果你简单地添加
背景色:initial,也有点奇怪
到.card img
,它也解决了这个问题。是的,一个问题有很多解决方案。重要的是哪一个先在你脑海中出现
<table>
<tr>
<td ng-click="flipCard()">
<div class="card-container">
<div class="card" ng-class="{'flipped': !deckVisible}">
<img class="front" ng-src="http://dummyimage.com/128x96/000/fff.jpg&text=3">
<img class="back" ng-src="http://dummyimage.com/128x96/000/fff.jpg&text=5">
</div>
</div>
</td>
</tr>
</table>
.card-container {
position: relative;
width: 220px;
height: 147px;
-webkit-perspective: 800px;
-moz-perspective: 800px;
-ms-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;
}
.card {
width: 100%;
height: 100%;
-webkit-transition: -webkit-transform 1s;
-moz-transition: -moz-transform 1s;
-ms-transition: -ms-transform 1s;
-o-transition: -o-transform 1s;
transition: transform 1s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.card.flipped {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.card img {
position: absolute;
display: block;
height: 100%;
width: 100%;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.card .back {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.card .back {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}