Question

所以，我有一个图标，一个圆圈图标，我想在它悬停时制作这个图标，它会有硬币翻转变换，就像https://desandro.github.io/3dtransforms/examples/card-02-slide-flip.html一样，但是它会翻转两次，所以它会回到第一个位置

这是HTML代码：

[('Dave', '13'), ('Bob', '15')]

这是CSS代码：

<div class="bg">
    <div class="icon">
        <img src="football.png">
    </div>
</div>

因此变换不像链接中的示例那样柔和，并且当第一次翻转（或旋转）时我想用不同的图像更改图标，但是当第二次旋转时它将返回到第一个图像。有什么建议吗？

之前谢谢

Answer 1

您忘了添加动画本身，即过渡。

.bg {
        padding: 6px 6px;
        float: left;
        width: 20%;
    }

    .icon {
      width: 100px;
      height: 100px;
      overflow: hidden;
      border-radius: 50%;
      box-shadow: 3px 3px 10px black;
      border: 0px;
      background-color: white;
      margin-left: auto;
      margin-right: auto;
      display: block;
      /* TRANSITION HERE!! */
      -webkit-transition: transform 1s ease;
      -moz-transition: transform 1s ease;
      -ms-transition: transform 1s ease;
      -o-transition: transform 1s ease;
      transition: transform 1s ease;
      /* END OF TRANSITION */
    }

    .icon img{
        left: 50%;
        top: 50%;
        height: 100%;
        width: auto; 
    }

    .icon:hover {
        transform: translateX( -1px ) rotateY( 180deg ); /* ALSO EXTRA TRANSFORM PROPERTIES ADDED FOR COMPATIBILITY*/
        -ms-transform: translateX( -1px ) rotateY(180deg); /* IE 9 */
        -webkit-transform: translateX( -1px ) rotateY(180deg); /* Chrome, Safari, Opera */
    }

<div class="bg">
    <div class="icon">
        <img src="https://i.stack.imgur.com/RVjde.jpg">
    </div>
</div>

我希望这会有所帮助。

干杯！

Answer 2

您可以定义以下动画：

@keyframes flip_animation {
  from {transform: rotateY(0deg);}
  to {transform: rotateY(360deg);}
}

将此动画添加为CSS-Class

.icon:hover {
    animation-name: flip_animation;
    animation-duration: 1s;
}

有关CSS中动画的详细信息，请参阅此link。

如何在CSS中进行硬币翻转变换

2 个答案: