Css缩放容器但不缩放包含文本的内部Div

Question

以下是我的问题http://jsfiddle.net/887YU/97/。

我缩小外部div并缩小内部div。

.container:hover .box-back{
    /* at the same time flip the back side into visibility */
    transform:rotateY(360deg);
    -webkit-transform:rotateY(360deg) scale3d(3,3,3);
    -moz-transform:rotateY(360deg);
    -ms-transform:rotateY(360deg);
    -o-transform:rotateY(360deg);
    }

.box-back * {
    -webkit-transform: scale3d(.33,.33,.33);
}

这种工作但内部div间距中的文字搞砸了，我不知道如何解决它。我的意思是当容器被轻拍并翻转时，文本从容器的底部开始。关于如何解决这个问题的任何想法？

Answer 1

将transform-origin: center top;添加到您的.box-back *规则

.box-back * {
    -webkit-transform: scale3d(.33,.33,.33);
    transform-origin: center top;
}