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