コインフリップトランスフォームをCSSで作成する方法

Question

これは、円のアイコンを持っています。これをホバリングしたときに、https://desandro.github.io/3dtransforms/examples/card-02-slide-flip.htmlのようにコインフリップトランスフォームされますが、第1の位置に移動する。

これは、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); 
    } 

ので、変換はからの例のようなソフトではありませんリンク、および最初のフリップ（または回転）私がうまくいけば別の画像でアイコンを変更するが、2回目に回転すると最初の画像に戻ります。なにか提案を？ありがとうございました

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クラス

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

は、CSSでのアニメーションの詳細については、このlinkを参照してください。