html - 制作文本 "flip up"

Question

我想让一段文字“翻起来”，就好像它躺在 table 上然后又升起来一样。我的直接问题是 transform-origin - 我无法将文本的轴心点更改为“底部”。

0% {transform:perspective(600px) rotateX(90deg);transform-origin:bottom bottom;}

如果我将旋转/枢轴点更改为 0% 或 40% 之类的值，上述操作将失败，如下所示:

0% {transform:perspective(600px) rotateX(90deg);transform-origin:20% 40%;}

JS fiddle :http://jsfiddle.net/emilius/1c7q9u38/

Answer 1

我认为 display: block; 是这里的关键

http://jsfiddle.net/1c7q9u38/1/

#test {
    display: block;
    -webkit-transform-origin: center bottom;
    -webkit-animation: flipUp 1s ease-out;  
}