Coinflip動畫不能正確旋轉（並且在css動畫中有多個轉換）

Question

好的，所以我有兩個問題，第一個問題是我希望動畫在X軸上旋轉，但看起來很奇怪，因爲它不是旋轉的Fiddle

然後我的另一個問題是，當我在變換動畫中添加類似scale(1.5)的東西時，它似乎忽略了rotation，它就不再工作了。

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

的.coin元件的高度被計算爲0，所以這是其中transform-origin是。如果你讓硬幣填滿它的父母，那麼它看起來不錯。您可以通過將scale應用於包裝而不是硬幣來解決縮放問題。

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