2013-08-22 62 views
0

我已經創建了三維的轉換樣品中瀏覽器的JavaScript庫:的3D轉換

<div id="wrapper"> 
    <div id="cube"> 
     <div id="top">TOP</div> 
     <div id="front">FRONT</div> 
    </div> 
</div> 

和CSS:

#cube div{ 
    -webkit-transform-origin:50% 50% -150px; 
    -webkit-transition: -webkit-transform .3s linear; 
    border:1px solid black; 
} 
#cube:hover #top{ 
    -webkit-transform: perspective(1000px) translate3d(0,0,-150px) rotate3d(1,0,0,0); 
} 
#cube:hover #front{ 
    -webkit-transform: perspective(1000px) translate3d(0,0,-150px) rotate3d(1,0,0,-90deg); 
} 
#cube #top{ 
    -webkit-transform: perspective(1000px) translate3d(0,0,-150px) rotate3d(1,0,0,90deg); 
} 
#cube #front{ 
    -webkit-transform: perspective(1000px) translate3d(0,0,-150px) rotate3d(1,0,0,0); 
} 

你可以看到這個樣本here

但現在它只適用於鉻,我想使它更交叉瀏覽。任何人都可以建議一些JavaScript庫的3D轉換?有沒有辦法改變圖像和文字?

回答