这个想法是在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>
答案 0 :(得分:1)
我认为您只需要将backface-visibility: hidden;
添加到前卡。
如果您需要动画具有无限外观,则必须具有类似的0%和100%点数。
此外,您错过了transform-style: preserve-3d;
财产。
另外,我还添加了一个容器来避免卡上的动画。我认为它更具语义性。
看看这个小提琴:http://jsfiddle.net/nikoloza/2zrk7/
<强>更新强>
如果我们将perspective: 1000
添加到主容器中,我们将获得真正的3D效果。小提琴:http://jsfiddle.net/nikoloza/2zrk7/1/
更新2
如果我们只需要从左到右翻转,我们可以将360deg
而不是0deg
设置为动画中的100%点。小提琴:http://jsfiddle.net/nikoloza/2zrk7/2/