如何CSS3轉換和只在最後旋轉

Question

我想有一個DIV塊向右移動300px，然後圍繞Y軸180度旋轉，移回原點X位置，然後旋轉Y軸減180deg。

|-->---->----->------| 
rotate    rotate 
|----<-----<-----<---| 

我現在旋轉和移動的同時。有什麼辦法可以逐步定義這些轉換嗎？

http://jsbin.com/nomuqe/edit?html,css,output

謝謝！

Answer 1

您需要使用所需值設置更多關鍵幀。

既然你想旋轉保持相同的位置（翻譯），你需要設置2個關鍵幀以相同的轉化價值，只改變旋轉

.test{ 
 
    display: block; 
 
    width: 50px; 
 
    height: 50px; 
 
    border-radius: 20px 0 0px 20px; 
 
    background: orange; 
 
    animation: move 4s infinite; 
 
} 
 
@keyframes move{ 
 
    0%{ 
 
    transform: translateX(0px) rotateY(0deg); 
 
    } 
 
    49%{ 
 
    transform: translateX(300px) rotateY(0deg); 
 
    } 
 
    50%{ 
 
    transform: translateX(300px) rotateY(180deg); 
 
    } 
 
    100%{ 
 
    transform: translateX(0px) rotateY(180deg); 
 
    } 
 
}

<div class='test'></div>