如何在css中进行硬币翻转转换

所以，我有一个图标，一个圆形图标，我想在它悬停时做出这个图标，它会有硬币翻转转换，就像https://desandro.github.io/3dtransforms/examples/card-02-slide-flip.html，但它翻转两次，所以它回来了到第一个位置。如何在css中进行硬币翻转转换

这是HTML代码：

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

这是CSS代码：

.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; 
    } 

    .icon img{ 
     left: 50%; 
     top: 50%; 
     height: 100%; 
     width: auto; 
    } 

    .icon:hover { 
     transform: translateX(-1px) rotateY(180deg); 
    }

所以变换不软像从示例链接，以及当我第一次翻转（或旋转）时t用不同的图像改变图标，但是当第二次旋转时它将回到第一图像。任何建议？先谢谢

来源

2017-02-14 Rian

为什么我的图像不显示？ – Rian

假设只有两个（即显示两个硬币），图像对我来说显得很好。 –

是啊，它只是两个，谢谢在我的浏览器它没有出现@RionWilliams – Rian

你忘了添加动画本身，转换。

.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>

我希望这有助于。

干杯！

来源

2017-02-14 14:37:26 Evochrome

omg，我忘了。非常感谢，你帮助我:) – Rian

可以定义动画中的以下内容：

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

并添加此动画您在CSS-类

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

请参阅本link有关CSS动画的更多信息。

来源

2017-02-14 14:47:59 Michael

它确实有效，但是这只会促使翻转前进而不翻转翻转，这在这种情况下是瞬时的。请参阅：https://jsfiddle.net/g3phq25y/1/ – Evochrome

我将在2h编辑 – Michael

感谢您的帮助，我想我也有一些选择。 – Rian

如何在css中进行硬币翻转转换

回答

相关问题