Question

我在Matematik-Geometri部分的sifrelimatematik.com上有3张图片。当您将鼠标悬停在图像上时，它们会使用这些代码翻转360度;

.flip-container {
    perspective: 1000px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 55%;
}
    /* flip the pane when hovered */
    .flip-container:hover .flipper, .flip-container.hover .flipper {
        transform: rotateY(360deg);
    }

.flip-container, .front, .back {
    width: 110px;
    height: 90px;
}

/* flip speed goes here */
.flipper {
    transition: 1.2s;
    transform-style: preserve-3d;
    padding-bottom: 98px;
    position: relative;
-webkit-animation-iteration-count:  2;
}

/* hide back of pane during swap */
.front, .back {
    backface-visibility: ;

    position: absolute;
    top: 0;
    left: 0;
}

但我希望图像在鼠标悬停后停止翻转。当我滚动到其他地方时，我不想让它倒退。

就像这个例子; lewendewoordmoot.co.za/（在Afdelings部分下）

我该怎么做？谢谢你的帮助！

Answer 1

我认为animation属性可能有所帮助。

您可以定义一个名为rotation的新动画。

@keyframes rotation{
    to{transform:rotateY(360deg)}
}

您可以使用animation代替transition。

.flipper{
     animation-fill-mode: forwards;
     animation: rotation 1.2s ease infinite;
     animation-play-state: paused;
}
.flip-container:hover .flipper{
     animation-play-state: running;
}

如果你想让它交替玩，你可以添加：

.flipper{
    animation-direction: alternate;
}

试一试！

使用CSS鼠标悬停后停止翻转图像？

1 个答案: