translateX()——动画示例

rotate(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); //旋转轴的 X 坐标 50个像素。 } 
     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); } 
     100% { 
         transform-origin:top; 
         transform:translateY(50px) rotateX(180deg); }
 }