translateY()——动画示例

translateY(t)

/* HTML */
<div class="stage"> 
    <div class="box"></div> 
</div>

/* CSS */
.stage{width:100px;height:100px;} 
.box { 
    width:50px; 
    height:50px; 
    background:red; 
    animation:flipAround 4s infinite; 
    transform-origin:right; } 
@keyframes 'flipAround' { 
    25% { 
        transform-origin:right; 
        animation-mode:forwards; 
        transform:rotateY(-180deg); } 
    25.001% { 
        transform-origin:bottom; 
        transform:translateX(50px); }
    50% { 
        transform-origin:bottom; 
        transform:translateX(50px) rotateX(-180deg); } 
    50.001% { 
        transform-origin:left; 
        transform:translateX(50px) translateY(50px); } 
    75% { 
        transform-origin:left; 
        transform:translateX(50px) translateY(50px) rotateY(180deg); } 
    75.001% { 
        transform-origin:top; 
        transform:translateY(50px); //旋转轴的 Y 坐标 50个像素。 } 
    100% { 
        transform-origin:top; 
        transform:translateY(50px) rotateX(180deg); } 
}