Coinflip动画不能正确旋转（并且在css动画中有多个转换）

问题描述：

好的，所以我有两个问题，第一个问题是我希望动画在X轴上旋转，但看起来很奇怪，因为它不是旋转的Fiddle Coinflip动画不能正确旋转（并且在css动画中有多个转换）

然后我的另一个问题是，当我在变换动画中添加类似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; 
}

答

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

这是真棒，感谢您的时间！ –

Coinflip动画不能正确旋转（并且在css动画中有多个转换）

相关推荐