Css比例容器，但不缩放包含文本的内部部分

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; 
}