L'animation Coinflip ne tourne pas correctement (et plusieurs transformations dans l'animation CSS)

Question

Très bien, donc j'ai deux problèmes, le premier problème est que je veux que l'animation tourne sur les axes X, mais ça a l'air bizarre, parce que ça ne tourne pas dans l'autre, Fiddle

Alors mon autre problème est, quand j'ajouter quelque chose comme scale(1.5) à la transformation animation, il semble juste d'ignorer le rotation, juste ne fonctionnera plus.

HTML

<div class="coin-wrapper"> 
    <div class="animate coin"> 
    <div class="terrorist"></div> 
    <div class="counter-terrorist"></div> 
    </div> 
</div> 

CSS

.animate{ 
    animation: rotate 5s; 
} 

@-webkit-keyframes rotate { 
    from { 
    -webkit-transform: rotateY(0); 
    -moz-transform: rotateY(0); 
    transform: rotateY(0); 
    } 

    to { 
    -webkit-transform: rotateX(2160deg); 
    -moz-transform: rotateX(2160deg); 
    transform: rotateX(2160deg); 
    } 
} 

.coin-wrapper { 
    width: 200px; 
    height: 200px; 
    position: absolute; 
    top: calc(50% - 100px); 
    left: calc(50% - 100px); 
} 

.coin { 
    position: relative; 
    width: 200px; 
    transform-style: preserve-3d; 
} 

.coin .counter-terrorist, .coin .terrorist { 
    position: absolute; 
    width: 200px; 
    height: 200px; 
} 

.coin .terrorist { 
    border-radius: 50%; 
    background-image:url('https://csgoloto.com/template/img/terrorist.png'); 
    background-size:cover; 
} 

.coin .counter-terrorist { 
    transform: rotateY(180deg); 
    border-radius: 50%; 
    background-image:url('https://csgoloto.com/template/img/counter-terrorist.png'); 
    background-size:cover; 
} 

Answer 1

La hauteur de l'élément .coin est calculée comme étant 0, de sorte que ce cas est le transform-origin. Si vous faites que la pièce remplisse son parent, alors ça a l'air bien. Vous pouvez contourner le problème de mise à l'échelle en appliquant scale à l'encapsuleur au lieu de la pièce.

.animate{ 
 
    animation: rotate 5s; 
 
} 
 
.coin-wrapper { 
 
    animation: scale 5s; 
 
} 
 

 
@-webkit-keyframes rotate { 
 
    from { 
 
    -webkit-transform: rotateY(0); 
 
    -moz-transform: rotateY(0); 
 
    transform: rotateY(0); 
 
    } 
 

 
    to { 
 
    -webkit-transform: rotateX(2160deg); 
 
    -moz-transform: rotateX(2160deg); 
 
    transform: rotateX(2160deg); 
 
    } 
 
} 
 
@-webkit-keyframes scale { 
 
    from { 
 
    -webkit-transform: scale(1); 
 
    -moz-transform: scale(1); 
 
    transform: scale(1); 
 
    } 
 

 
    to { 
 
    -webkit-transform: scale(1.5); 
 
    -moz-transform: scale(1.5); 
 
    transform: scale(1.5); 
 
    } 
 
} 
 

 
.coin-wrapper { 
 
    width: 200px; 
 
    height: 200px; 
 
    position: absolute; 
 
    top: calc(50% - 100px); 
 
    left: calc(50% - 100px); 
 
} 
 

 
.coin { 
 
    position: relative; 
 
    width: 100%; 
 
    height: 100%; 
 
    transform-style: preserve-3d; 
 
} 
 

 
.coin .counter-terrorist, .coin .terrorist { 
 
    position: absolute; 
 
    width: 200px; 
 
    height: 200px; 
 
} 
 

 
.coin .terrorist { 
 
    border-radius: 50%; 
 
    background-image:url('https://csgoloto.com/template/img/terrorist.png'); 
 
    background-size:cover; 
 
} 
 

 
.coin .counter-terrorist { 
 
    transform: rotateY(180deg); 
 
    border-radius: 50%; 
 
    background-image:url('https://csgoloto.com/template/img/counter-terrorist.png'); 
 
    background-size:cover; 
 
}

<div class="coin-wrapper"> 
 
    <div class="animate coin"> 
 
    <div class="terrorist"></div> 
 
    <div class="counter-terrorist"></div> 
 
    </div> 
 
</div>