为什么我的perspective-origin设置为bottom。正方形却还是按照默认的方式(perspective-origin:50% 50%;)翻转。

<div class="container">3</div>
.container{
    width: 300px;
    height: 300px;
    background: #2B1919;
    margin: 50px auto;
    text-align: center;
    line-height: 300px;
    font-size: 250px;
    color: #91A7A8;
}
.container{
    -webkit-perspective:0;
    -webkit-perspective-origin:bottom;
    -webkit-transform-style:perspective-3d;
    -moz-perspective:0;
    -moz-perspective-origin:bottom;
    -moz-transform-style:perspective-3d;
    perspective:0;
    perspective-origin:bottom;
    transform-style:perspective-3d;
    overflow: hidden;
    transition:1s ease-in-out 0.1s;
}
.container:hover{
    -webkit-transform:rotateX(90deg);
    /* -webkit-transform:rotateY(90deg); */
    /* -webkit-transform:rotateZ(90deg); */
    -moz-transform:rotateX(90deg);
    /* -moz-transform:rotateY(90deg);
    -moz-transform:rotateZ(90deg); */
    transform:rotateX(90deg);
    /* transform:rotateY(90deg);
    transform:rotateZ(90deg); */
}