用于3d转换的javascript库

Question

我在浏览器中创建了用于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。

但是现在它仅适用于镀铬，我想让它更具交叉浏览效果。任何人都可以建议一些用于3d转换的javascript库吗？有没有办法转换图像和文字？

Answer 1

这是css3效果的插件

Effects

请将此作为注释阅读：   Note(othr brwsers)

Answer 2

正如你所看到的那样＆＃34; transit.js＆＃34;你提到的提供2d转换并不像3d那么快（因为GPU支持translate3d（...）而不是translate（..））

原始图片网址 - http://pix.academ.org/img/2015/05/21/64bcd912c0851604977d73c7d1f82778.png