如何更改此翻转动画的“支点”？

Question

我一直在玩这个CSS3动画，但我不能让它从一个不同的位置转到中间位置。

这是一种动画，从上半部分进入负z轴，下半部进入正z轴的中间产生翻转效果。

我想让枢轴点成为顶部，以便应用此动画的元素被转换，整个元素进入正z轴。

然后flipOut动画就是相反的。

我希望得到这个动画的行为，如我所描述的任何帮助。

这里是，现在运行的动画代码：

.animated { 
    -webkit-animation-fill-mode: both; 
    -moz-animation-fill-mode: both; 
    -ms-animation-fill-mode: both; 
    -o-animation-fill-mode: both; 
    animation-fill-mode: both; 
    -webkit-animation-duration: 0.6s; 
    -moz-animation-duration: 0.6s; 
    -ms-animation-duration: 0.6s; 
    -o-animation-duration: 0.6s; 
    animation-duration: 0.6s; 
} 

@-webkit-keyframes flipInX { 
    0% { 
     -webkit-transform: perspective(400px) rotateX(90deg); 
     opacity: 0; 
    } 

    40% { 
     -webkit-transform: perspective(400px) rotateX(-10deg); 
    } 

    70% { 
     -webkit-transform: perspective(400px) rotateX(10deg); 
    } 

    100% { 
     -webkit-transform: perspective(400px) rotateX(0deg); 
     opacity: 1; 
    } 
} 
@-moz-keyframes flipInX { 
    0% { 
     -moz-transform: perspective(400px) rotateX(90deg); 
     opacity: 0; 
    } 

    40% { 
     -moz-transform: perspective(400px) rotateX(-10deg); 
    } 

    70% { 
     -moz-transform: perspective(400px) rotateX(10deg); 
    } 

    100% { 
     -moz-transform: perspective(400px) rotateX(0deg); 
     opacity: 1; 
    } 
} 
@-o-keyframes flipInX { 
    0% { 
     -o-transform: perspective(400px) rotateX(90deg); 
     opacity: 0; 
    } 

    40% { 
     -o-transform: perspective(400px) rotateX(-10deg); 
    } 

    70% { 
     -o-transform: perspective(400px) rotateX(10deg); 
    } 

    100% { 
     -o-transform: perspective(400px) rotateX(0deg); 
     opacity: 1; 
    } 
} 
@keyframes flipInX { 
    0% { 
     transform: perspective(400px) rotateX(90deg); 
     opacity: 0; 
    } 

    40% { 
     transform: perspective(400px) rotateX(-10deg); 
    } 

    70% { 
     transform: perspective(400px) rotateX(10deg); 
    } 

    100% { 
     transform: perspective(400px) rotateX(0deg); 
     opacity: 1; 
    } 
} 

.flipInX { 
    -webkit-backface-visibility: visible !important; 
    -webkit-animation-name: flipInX; 
    -moz-backface-visibility: visible !important; 
    -moz-animation-name: flipInX; 
    -o-backface-visibility: visible !important; 
    -o-animation-name: flipInX; 
    backface-visibility: visible !important; 
    animation-name: flipInX; 
} 
@-webkit-keyframes flipOutX { 
    0% { 
     -webkit-transform: perspective(400px) rotateX(0deg); 
     opacity: 1; 
    } 
    100% { 
     -webkit-transform: perspective(400px) rotateX(90deg); 
     opacity: 0; 
    } 
} 

@-moz-keyframes flipOutX { 
    0% { 
     -moz-transform: perspective(400px) rotateX(0deg); 
     opacity: 1; 
    } 
100% { 
     -moz-transform: perspective(400px) rotateX(90deg); 
     opacity: 0; 
    } 
} 

@-o-keyframes flipOutX { 
    0% { 
     -o-transform: perspective(400px) rotateX(0deg); 
     opacity: 1; 
    } 
100% { 
     -o-transform: perspective(400px) rotateX(90deg); 
     opacity: 0; 
    } 
} 

@keyframes flipOutX { 
    0% { 
     transform: perspective(400px) rotateX(0deg); 
     opacity: 1; 
    } 
100% { 
     transform: perspective(400px) rotateX(90deg); 
     opacity: 0; 
    } 
} 

.flipOutX { 
    -webkit-animation-name: flipOutX; 
    -webkit-backface-visibility: visible !important; 
    -moz-animation-name: flipOutX; 
    -moz-backface-visibility: visible !important; 
    -o-animation-name: flipOutX; 
    -o-backface-visibility: visible !important; 
    animation-name: flipOutX; 
    backface-visibility: visible !important; 
} 

Answer 1

设置transform origin：

transform-origin : center top; 

每MDN文档：

transform-origin: x-offset         /* One-value syntax */ E.g. transform-origin: 2px 
transform-origin: offset-keyword              E.g. transform-origin: bottom 

transform-origin: x-offset y-offset       /* Two-value syntax */ E.g. transform-origin: 3cm 2px 
transform-origin: y-offset x-offset-keyword           E.g. transform-origin: 2px left 
transform-origin: x-offset-keyword y-offset           E.g. transform-origin: left 2px 
transform-origin: x-offset-keyword y-offset-keyword         E.g. transform-origin: right top 
transform-origin: y-offset-keyword x-offset-keyword         E.g. transform-origin: top right 

transform-origin: x-offset y-offset z-offset     /* Three-value syntax */ E.g. transform-origin: 2px 30% 10px 
transform-origin: y-offset x-offset-keyword z-offset         E.g. transform-origin: 2px left 10px 
transform-origin: x-offset-keyword y-offset z-offset         E.g. transform-origin: left 5px -3px 
transform-origin: x-offset-keyword y-offset-keyword z-offset       E.g. transform-origin: right bottom 2cm 
transform-origin: y-offset-keyword x-offset-keyword z-offset       E.g. transform-origin: bottom right 2cm