html禁止翻转,html – 翻转两个不同的图像并停止悬停

我们的想法是在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);

}

}