我们的想法是在CSS上创建一个无限动画,它将显示卡片的两面始终在旋转并在悬停时停止动画,仅显示正面并通过指向另一部分的链接增加20%的大小.
我可以在悬停时翻转并增长到第二个图像,但我似乎无法替换关键帧动画上的动作.
这是我到目前为止:
.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);
}
}