我们的想法是在CSS上创建一个无限动画,它将显示卡片的两面始终在旋转并在悬停时停止动画,仅显示正面并通过指向另一部分的链接增加20%的大小.
我可以在悬停时翻转并增长到第二个图像,但我似乎无法替换关键帧动画上的动作.
这是我到目前为止:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.panel {
width: 300px;
height: 300px;
margin: auto;
position: relative;
}
.card {
width: 100%;
height: 100%;
-o-transition: all .5s;
-ms-transition: all .5s;
-moz-transition: all .5s;
-webkit-transition: all .5s;
transition: all .5s;
-webkit-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
top: 0px;
left: 0px;
-webkit-animation: CardFlip 5s infinite;
}
.front {
position: absolute;
top: 0px;
left: 0px;
z-index: 2;
background-image: url('http://placehold.it/300x300/red');
}
.back {
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
-webkit-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
transform: rotateY(-180deg);
background-image: url('http://placehold.it/300x300/blue');
}
.panel:hover .front {
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
-webkit-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.panel:hover .back {
position: absolute;
top: 0px;
left: 0px;
z-index: 2;
-webkit-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
transform: rotateY(0deg);
-webkit-transform: scale(1.2,1.2);
-ms-transform: scale(1.2,1.2);
-moz-transform: scale(1.2,1.2);
transform: scale(1.2,1.2);
}
@-webkit-keyframes CardFlip {
0% {
position: absolute;
top: 0px;
left: 0px;
z-index: 2;
-webkit-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
transform: rotateY(0deg);
-webkit-transform: scale(1.2,1.2);
-ms-transform: scale(1.2,1.2);
-moz-transform: scale(1.2,1.2);
transform: scale(1.2,1.2);
}
100% {
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
-webkit-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
}
}
</style>
</head>
<body>
<br>
<br>
<div class="panel">
<div class="front card">
</div>
<div class="back card">
</div>
</div>
</body>
我认为你只需要添加backface-visibility: hidden;到前卡。
如果您需要动画具有无限的外观，则必须具有类似的 0% 和 100% 点。
另外，你还错过了transform-style: preserve-3d;财产。
另外，我还添加了一个容器以避免卡片上出现动画。我认为这更符合语义。
看看这个小提琴：http://jsfiddle.net/nikoloza/2zrk7/
更新
如果我们添加perspective: 1000到主容器中，我们将获得真正的 3D 效果。小提琴： http: //jsfiddle.net/nikoloza/2zrk7/1/
更新2
如果我们只需要从左到右翻转，我们可以在动画中设置 100% 点360deg。0deg小提琴： http: //jsfiddle.net/nikoloza/2zrk7/2/