如何通过转换子元素来重新创建透视原点效果？ [英] How to recreate perspective-origin effect by transforming child elements?

问题描述

所以在与IE进行斗争后，毛刺和不兼容性，我终于有了正确尺寸的长方体工作（更新： 这里是一个例子）。动画需要分别动画的所有方面，而不是单个的父元素，但是这似乎是使它在IE中工作的唯一方法。

使用单个立方体工作，但是多个立方体是有问题的，因为透视被应用于单个变换的元素（为了在IE中工作是必要的），它们看起来都是相同的，而不管它们在舞台上的位置：

http://jsfiddle.net/YsPmm/

如果透视应用于舞台，消失点将位于其中心，导致子对象被相应地转换，这就是我要重新创建（同时保持IE兼容性！）：

http://jsfiddle.net/kbhej/

$ b $不幸的是，它似乎将透视原点应用于单个元素不工作，所以我想知道是否有任何其他想法如何实现这种效果？

---

jsfiddle示例的代码

透视单个元素：

 <！doctype html> 
< html> 
< head> 
< style> 
 .stage {
 width：800px; 
 height：800px; 
 background：＃f6f6f6; 
} 
 .wrapper，.top，.front {
 position：absolute; 
 width：200px; 
 height：200px; 
 
 -webkit-backface-visibility：hidden; 
 -moz-backface-visibility：hidden; 
 backface-visibility：hidden; 
} 
 .wrapper：nth-​​child（1）{
 z-index：4; 
} 
 .wrapper：nth-​​child（2）{
 left：200px; 
 z-index：3; 
} 
 .wrapper：nth-​​child（3）{
 left：400px; 
 z-index：2; 
} 
 .wrapper：nth-​​child（4）{
 left：600px; 
 z-index：1; 
} 
 
 .top {
 background-color：＃00ff00; 
 
 -webkit-transform-origin：50％50％-100px; 
 -moz-transform-origin：50％50％-100px; 
 transform-origin：50％50％-100px; 
 
 -webkit-transform：perspective（200px）translateZ（-100px）rotateX（90deg）rotateX（-45deg）; 
 -moz-transform：perspective（200px）translateZ（-100px）rotateX（90deg）rotateX（-45deg）; 
 transform：perspective（200px）translateZ（-100px）rotateX（90deg）rotateX（-45deg）; 
} 
 
 .front {
 background-color：＃ff0000; 
 
 -webkit-transform-origin：50％50％-100px; 
 -moz-transform-origin：50％50％-100px; 
 transform-origin：50％50％-100px; 
 
 -webkit-transform：perspective（200px）translateZ（-100px）rotateX（-45deg）; 
 -moz-transform：perspective（200px）translateZ（-100px）rotateX（-45deg）; 
 transform：perspective（200px）translateZ（-100px）rotateX（-45deg）; 
} 
< / style> 
< / head> 
< body> 
< div class ='stage'> 
< div class ='wrapper'> 
< div class ='top'>< / div> 
< div class ='front'>< / div> 
< / div> 
 
< div class ='wrapper'> 
< div class ='top'>< / div> 
< div class ='front'>< / div> 
< / div> 
 
< div class ='wrapper'> 
< div class ='top'>< / div> 
< div class ='front'>< / div> 
< / div> 
 
< div class ='wrapper'> 
< div class ='top'>< / div> 
< div class ='front'>< / div> 
< / div> 
< / div> 
< / body> 
< / html> 
  

舞台上的视角：

 <！doctype html> 
< html> 
< head> 
< style> 
 .stage {
 width：800px; 
 height：800px; 
 background：＃f6f6f6; 
 
 -webkit-perspective：800px; 
 -moz-perspective：800px; 
透视：800px; 
} 
 .wrapper，.top，.front {
 position：absolute; 
 width：200px; 
 height：200px; 
 
 -webkit-backface-visibility：hidden; 
 -moz-backface-visibility：hidden; 
 backface-visibility：hidden; 
 
 -webkit-transform-style：preserve-3d; 
 -moz-transform-style：preserve-3d; 
 transform-style：preserve-3d; 
} 
。wrapper：nth-​​child（1）{
 z-index：4; 
} 
 .wrapper：nth-​​child（2）{
 left：200px; 
 z-index：3; 
} 
 .wrapper：nth-​​child（3）{
 left：400px; 
 z-index：2; 
} 
 .wrapper：nth-​​child（4）{
 left：600px; 
 z-index：1; 
} 
 
 .wrapper {
 -webkit-transform：rotate3d（1，0，0，-45deg）translate3d（0，50px，50px）; 
 -moz-transform：rotate3d（1，0，0，-45deg）translate3d（0，50px，50px）; 
 transform：rotate3d（1，0，0，-45deg）translate3d（0，50px，50px）; 
} 
 
 .top {
 background-color：＃00ff00; 
 -webkit-transform：rotate3d（1，0，0，90deg）translate3d（0，-100px，100px）; 
 -moz-transform：rotate3d（1，0，0，90deg）translate3d（0，-100px，100px）; 
 transform：rotate3d（1，0，0，90deg）translate3d（0，-100px，100px）; 
} 
 
 .front {
 background-color：＃ff0000; 
} 
< / style> 
< / head> 
< body> 
< div class ='stage'> 
< div class ='wrapper'> 
< div class ='top'>< / div> 
< div class ='front'>< / div> 
< / div> 
 
< div class ='wrapper'> 
< div class ='top'>< / div> 
< div class ='front'>< / div> 
< / div> 
 
< div class ='wrapper'> 
< div class ='top'>< / div> 
< div class ='front'>< / div> 
< / div> 
 
< div class ='wrapper'> 
< div class ='top'>< / div> 
< div class ='front'>< / div> 
< / div> 
< / div> 
< / body> 
< / html> 
  

解决方案

http://stackoverflow.com/a/17369221/1392379\">由vals显示，当使用 transform：translate 将透视放置在阶段，所以我想，诀窍是把立方体包装放在舞台的中心，使用 perspective（）函数应用透视，然后相应地翻译面部位置。

这里有一个例子，它在IE10 / 11和Chrome中工作正常（如在中的预期），在Firefox中有很多当各个立方体的面相互交叉时闪烁，而在Safari中（对于Windows），当面相交时（这种情况看起来像这样是正确的行为，而且 Firefox ， Chrome 和IE都出错了。 更新让我回来看看，实际上它看起来像Safari是做错了，因为只有元素在同一个 3d渲染上下文是相交）。但是，主要目标是IE兼容性，即使它是一个恼人的大量额外的CSS，它的工作，所以...

http://jsfiddle.net/EDzXM/

---

jsfiddle示例代码

HTML：

 < div class ='wrapper'> 
< div class ='front'>前< / div> 
< div class ='back'>返回< / div> 
< div class ='top'>顶部< / div> 
< div class ='bottom'>底部< / div> 
< div class ='left'>左< / div> 
< div class ='right'>右< / div> 
< / div> 
< div class ='wrapper'> 
< div class ='front'>前< / div> 
< div class ='back'>返回< / div> 
< div class ='top'>顶部< / div> 
< div class ='bottom'>底部< / div> 
< div class ='left'>左< / div> 
< div class ='right'>右< / div> 
< / div> 
< div class ='wrapper'> 
< div class ='front'>前< / div> 
< div class ='back'>返回< / div> 
< div class ='top'>顶部< / div> 
< div class ='bottom'>底部< / div> 
< div class ='left'>左< / div> 
< div class ='right'>右< / div> 
< / div> 
< div class ='wrapper'> 
< div class ='front'>前< / div> 
< div class ='back'>返回< / div> 
< div class ='top'>顶部< / div> 
< div class ='bottom'>底部< / div> 
< div class ='left'>左< / div> 
< div class ='right'>右< / div> 
< / div> 
  

CSS：

 code> html，body {
 margin：0; 
 padding：0; 
 width：100％; 
 height：100％; 
 overflow：hidden; 
} 
 .wrapper {
 position：absolute; 
 left：50％; 
 margin-left：-120px; 
 
 -webkit-transform-style：preserve-3d; 
 transform-style：preserve-3d; 
} 
 .wrapper：nth-​​child（1）{
 z-index：1; 
} 
 .wrapper：nth-​​child（2）{
 z-index：2; 
} 
 .wrapper：nth-​​child（3）{
 z-index：1; 
} 
 .wrapper：nth-​​child（4）{
 z-index：0; 
} 
 .top，.front，.back，.bottom，.left，.right {
 position：absolute; 
 width：240px; 
 height：400px; 
 color：#fff; 
 font-size：40px; 
 font-weight：bold; 
 text-align：center; 
 line-height：400px; 
 
 -webkit-backface-visibility：hidden; 
 backface-visibility：hidden; 
 
 -webkit-animation-duration：25s; 
 animation-duration：25s; 
 
 -webkit-animation-timing-function：ease-in-out; 
 animation-timing-function：ease-in-out; 
 
 -webkit-animation-fill-mode：forward; 
 animation-fill-mode：forward; 
} 
 .top，.bottom {
 height：300px; 
 line-height：300px; 
} 
 .left，.right {
 width：300px; 
} 
 .front，.back {
 -webkit-transform-origin：50％50％-150px; 
 transform-origin：50％50％-150px; 
} 
 .top，.bottom {
 -webkit-transform-origin：50％50％-200px; 
 transform-origin：50％50％-200px; 
} 
 .left，.right {
 -webkit-transform-origin：50％50％-120px; 
 transform-origin：50％50％-120px; 
} 
 .front {
 background-color：＃ff0000; 
} 
 .back {
 background-color：＃00cc00; 
} 
 .top {
 background-color：＃0000ff; 
} 
 .bottom {
 background-color：＃cccc00; 
} 
 .left {
 background-color：＃00cccc; 
} 
 .right {
 background-color：＃ff00ff; 
} 
 .wrapper：nth-​​child（1）.front {
 -webkit-animation-name：rotate-front-0; 
 animation-name：rotate-front-0; 
} 
 .wrapper：nth-​​child（1）.back {
 -webkit-animation-name：rotate-back-0; 
 animation-name：rotate-back-0; 
} 
 .wrapper：nth-​​child（1）.top {
 -webkit-animation-name：rotate-top-0; 
 animation-name：rotate-top-0; 
} 
 .wrapper：nth-​​child（1）.bottom {
 -webkit-animation-name：rotate-bottom-0; 
 animation-name：rotate-bottom-0; 
} 
 .wrapper：nth-​​child（1）.left {
 -webkit-animation-name：rotate-left-0; 
 animation-name：rotate-left-0; 
} 
 .wrapper：nth-​​child（1）.right {
 -webkit-animation-name：rotate-right-0; 
 animation-name：rotate-right-0; 
} 
 .wrapper：nth-​​child（2）.front {
 
 -webkit-animation-name：rotate-front-1; 
 animation-name：rotate-front-1; 
} 
 .wrapper：nth-​​child（2）.back {
 
 -webkit-animation-name：rotate-back-1; 
 animation-name：rotate-back-1; 
} 
 .wrapper：nth-​​child（2）.top {
 
 -webkit-animation-name：rotate-top-1; 
 animation-name：rotate-top-1; 
} 
 .wrapper：nth-​​child（2）.bottom {
 
 -webkit-animation-name：rotate-bottom-1; 
 animation-name：rotate-bottom-1; 
} 
 .wrapper：nth-​​child（2）.left {
 
 -webkit-animation-name：rotate-left-1; 
 animation-name：rotate-left-1; 
} 
 .wrapper：nth-​​child（2）.right {
 
 -webkit-animation-name：rotate-right-1; 
 animation-name：rotate-right-1; 
} 
 .wrapper：nth-​​child（3）.front {
 
 -webkit-animation-name：rotate-front-2; 
 animation-name：rotate-front-2; 
} 
 .wrapper：nth-​​child（3）.back {
 
 -webkit-animation-name：rotate-back-2; 
 animation-name：rotate-back-2; 
} 
 .wrapper：nth-​​child（3）.top {
 
 -webkit-animation-name：rotate-top-2; 
 animation-name：rotate-top-2; 
} 
 .wrapper：nth-​​child（3）.bottom {
 
 -webkit-animation-name：rotate-bottom-2; 
 animation-name：rotate-bottom-2; 
} 
 .wrapper：nth-​​child（3）.left {
 
 -webkit-animation-name：rotate-left-2; 
 animation-name：rotate-left-2; 
} 
 .wrapper：nth-​​child（3）.right {
 
 -webkit-animation-name：rotate-right-2; 
 animation-name：rotation-right-2; 
} 
 .wrapper：nth-​​child（4）.front {
 
 -webkit-animation-name：rotate-front-3; 
 animation-name：rotate-front-3; 
} 
 .wrapper：nth-​​child（4）.back {
 
 -webkit-animation-name：rotate-back-3; 
 animation-name：rotate-back-3; 
} 
 .wrapper：nth-​​child（4）.top {
 
 -webkit-animation-name：rotate-top-3; 
 animation-name：rotate-top-3; 
} 
 .wrapper：nth-​​child（4）.bottom {
 
 -webkit-animation-name：rotate-bottom-3; 
 animation-name：rotate-bottom-3; 
} 
 .wrapper：nth-​​child（4）.left {
 
 -webkit-animation-name：rotate-left-3; 
 animation-name：rotate-left-3; 
} 
 .wrapper：nth-​​child（4）.right {
 
 -webkit-animation-name：rotate-right-3; 
 animation-name：rotate-right-3; 
} 
 @ -webkit-keyframes rotate-front-0 {
 0％{
 -webkit-transform：perspective（1920px）translateX（-360px）translateZ（-150px） rotateX（-0deg）rotateY（0deg）; 
} 
 100％{
 -webkit-transform：perspective（1920px）translateX（-360px）translateZ（-150px）rotateX（-360deg）rotateY（360deg）; 
} 
} 
 @ -webkit-keyframes rotate-back-0 {
 0％{
 -webkit-transform：perspective（1920px）translateX（-360px） translateZ（-150像素）rotateX（180deg）rotateX（-0deg）rotateY（0deg）; 
} 
 100％{
 -webkit-transform：perspective（1920px）translateX（-360px）translateZ（-150px）rotateX（180deg）rotateX（-360deg）rotateY（-360deg）; 
} 
} 
 @ -webkit-keyframes rotate-top-0 {
 0％{
 -webkit-transform：translateY（50px）perspective（1920px）translateX （-360px）translateZ（-150px）rotateX（90deg）rotateX（-0deg）rotateZ（-0deg）; 
} 
 100％{
 -webkit-transform：translateY（50px）perspective（1920px）translateX（-360px）translateZ（-150px）rotateX（90deg）rotateX（-360deg）rotateZ -360deg）; 
} 
} 
 @ -webkit-keyframes rotate-bottom-0 {
 0％{
 -webkit-transform：translateY（50px）perspective（1920px）translateX （-360px）translateZ（-150px）rotateX（-90deg）rotateX（-0deg）rotateZ（-0deg）; 
} 
 100％{
 -webkit-transform：translateY（50px）perspective（1920px）translateX（-360px）translateZ（-150px）rotateX（-90deg）rotateX（-360deg）rotateZ （360deg）。 
} 
} 
 @ -webkit-keyframes rotate-left-0 {
 0％{
 -webkit-transform：translateX（-30px）perspective translateX（-360px）translateZ（-150px）rotateY（-90deg）rotateZ（0deg）rotateY（0deg）; 
} 
 100％{
 -webkit-transform：translateX（-30px）perspective（1920px）translateX（-360px）translateZ（-150px）rotateY（-90deg）rotateZ （360deg）。 
} 
} 
 @ -webkit-keyframes rotate-right-0 {
 0％{
 -webkit-transform：translateX（-30px）perspective translateX（-360px）translateZ（-150px）rotateY（90deg）rotateZ（0deg）rotateY（0deg）; 
} 
 100％{
 -webkit-transform：translateX（-30px）perspective（1920px）translateX（-360px）translateZ（-150px）rotateY（90deg）rotateZ（-360deg）rotateY （360deg）。 
} 
} 
 @ -webkit-keyframes rotate-front-1 {
 0％{
 -webkit-transform：perspective（1920px）translateX（-120px） translateZ（-150像素）rotateX（-0deg）rotateY（0deg）; 
} 
 100％{
 -webkit-transform：perspective（1920px）translateX（-120px）translateZ（-150px）rotateX（-360deg）rotateY（360deg）; 
} 
} 
 @ -webkit-keyframes rotate-back-1 {
 0％{
 -webkit-transform：perspective（1920px）translateX（-120px） translateZ（-150像素）rotateX（180deg）rotateX（-0deg）rotateY（0deg）; 
} 
 100％{
 -webkit-transform：perspective（1920px）translateX（-120px）translateZ（-150px）rotateX（180deg）rotateX（-360deg）rotateY（-360deg）; 
} 
} 
 @ -webkit-keyframes rotate-top-1 {
 0％{
 -webkit-transform：translateY（50px）perspective（1920px）translateX （-120px）translateZ（-150px）rotateX（90deg）rotateX（-0deg）rotateZ（-0deg）; 
} 
 100％{
 -webkit-transform：translateY（50px）perspective（1920px）translateX（-120px）translateZ（-150px）rotateX（90deg）rotateX（-360deg）rotateZ -360deg）; 
} 
} 
 @ -webkit-keyframes rotate-bottom-1 {
 0％{
 -webkit-transform：translateY（50px）perspective（1920px）translateX （-120px）translateZ（-150px）rotateX（-90deg）rotateX（-0deg）rotateZ（-0deg）; 
} 
 100％{
 -webkit-transform：translateY（50px）perspective（1920px）translateX（-120px）translateZ（-150px）rotateX（-90deg）rotateX （360deg）。 
} 
} 
 @ -webkit-keyframes rotate-left-1 {
 0％{
 -webkit-transform：translateX（-30px）perspective（1920px） translateX（-120px）translateZ（-150px）rotateY（-90deg）rotateZ（0deg）rotateY（0deg）; 
} 
 100％{
 -webkit-transform：translateX（-30px）perspective（1920px）translateX（-120px）translateZ（-150px）rotateY（-90deg）rotateZ （360deg）。 
} 
} 
 @ -webkit-keyframes rotate-right-1 {
 0％{
 -webkit-transform：translateX（-30px）perspective translateX（-120px）translateZ（-150px）rotateY（90deg）rotateZ（0deg）rotateY（0deg）; 
} 
 100％{
 -webkit-transform：translateX（-30px）perspective（1920px）translateX（-120px）translateZ（-150px）rotateY（90deg）rotateZ（-360deg）rotateY （360deg）。 
} 
} 
 @ -webkit-keyframes rotate-front-2 {
 0％{
 -webkit-transform：perspective（1920px）translateX（120px）translateZ （-150像素）rotateX（-0deg）rotateY（0deg）; 
} 
 100％{
 -webkit-transform：perspective（1920px）translateX（120px）translateZ（-150px）rotateX（-360deg）rotateY 
} 
} 
 @ -webkit-keyframes rotate-back-2 {
 0％{
 -webkit-transform：perspective（1920px）translateX（120px）translateZ （-150像素）rotateX（180deg）rotateX（-0deg）rotateY（0deg）; 
} 
 100％{
 -webkit-transform：perspective（1920px）translateX（120px）translateZ（-150px）rotateX（180deg）rotateX（-360deg）rotateY（-360deg）; 
} 
} 
 @ -webkit-keyframes rotate-top-2 {
 0％{
 -webkit-transform：translateY（50px）perspective（1920px）translateX （120px）translateZ（-150px）rotateX（90deg）rotateX（-0deg）rotateZ（-0deg）; 
} 
 100％{
 -webkit-transform：translateY（50px）透视图（1920像素）translateX（120像素）translateZ（-150像素）rotateX（90deg）rotateX（-360deg） 360deg）; 
} 
} 
 @ -webkit-keyframes rotate-bottom-2 {
 0％{
 -webkit-transform：translateY（50px）perspective（1920px）translateX （120px）translateZ（-150px）rotateX（-90deg）rotateX（-0deg）rotateZ（-0deg）; 
} 
 100％{
 -webkit-transform：translateY（50px）perspective（1920px）translateX（120px）translateZ（-150px）rotateX（-90deg）rotateX（-360deg）rotateZ 360deg）; 
} 
} 
 @ -webkit-keyframes rotate-left-2 {
 0％{
 -webkit-transform：translateX（-30px）perspective translateX（120px）translateZ（-150px）rotateY（-90deg）rotateZ（0deg）rotateY（0deg）; 
} 
 100％{
 -webkit-transform：translateX（-30px）perspective（1920px）translateX（120px）translateZ（-150px）rotateY（-90deg）rotateZ（360deg）rotateY 360deg）; 
} 
} 
 @ -webkit-keyframes rotate-right-2 {
 0％{
 -webkit-transform：translateX（-30px）perspective（1920px） translateX（120px）translateZ（-150px）rotateY（90deg）rotateZ（0deg）rotateY（0deg）; 
} 
 100％{
 -webkit-transform：translateX（-30px）perspective（1920px）translateX（120px）translateZ（-150px）rotateY（90deg）rotateZ（-360deg）rotateY 360deg）; 
} 
} 
 @ -webkit-keyframes rotate-front-3 {
 0％{
 -webkit-transform：perspective（1920px）translateX（360px）translateZ （-150像素）rotateX（-0deg）rotateY（0deg）; 
} 
 100％{
 -webkit-transform：perspective（1920px）translateX（360px）translateZ（-150px）rotateX（-360deg）rotateY 
} 
} 
 @ -webkit-keyframes rotate-back-3 {
 0％{
 -webkit-transform：perspective（1920px）translateX（360px）translateZ （-150像素）rotateX（180deg）rotateX（-0deg）rotateY（0deg）; 
} 
 100％{
 -webkit-transform：perspective（1920px）translateX（360px）translateZ（-150px）rotateX（180deg）rotateX（-360deg）rotateY（-360deg）; 
} 
} 
 @ -webkit-keyframes rotate-top-3 {
 0％{
 -webkit-transform：translateY（50px）perspective（1920px）translateX （360px）translateZ（-150px）rotateX（90deg）rotateX（-0deg）rotateZ（-0deg）; 
} 
 100％{
 -webkit-transform：translateY（50px）perspective（1920px）translateX（360px）translateZ（-150px）rotateX（90deg）rotateX（-360deg）rotateZ 360deg）; 
} 
} 
 @ -webkit-keyframes rotation-bottom-3 {
 0％{
 -webkit-transform：translateY（50px）perspective（1920px）translateX （360px）translateZ（-150px）rotateX（-90deg）rotateX（-0deg）rotateZ（-0deg）; 
} 
 100％{
 -webkit-transform：translateY（50px）perspective（1920px）translateX（360px）translateZ（-150px）rotateX（-90deg）rotateX（-360deg）rotateZ 360deg）; 
} 
} 
 @ -webkit-keyframes rotate-left-3 {
 0％{
 -webkit-transform：translateX（-30px）perspective translateX（360px）translateZ（-150px）rotateY（-90deg）rotateZ（0deg）rotateY（0deg）; 
} 
 100％{
 -webkit-transform：translateX（-30px）perspective（1920px）translateX（360px）translateZ（-150px）rotateY（-90deg）rotateZ（360deg）rotateY 360deg）; 
} 
} 
 @ -webkit-keyframes rotate-right-3 {
 0％{
 -webkit-transform：translateX（-30px）perspective translateX（360px）translateZ（-150px）rotateY（90deg）rotateZ（0deg）rotateY（0deg）; 
} 
 100％{
 -webkit-transform：translateX（-30px）perspective（1920px）translateX（360px）translateZ（-150px）rotateY（90deg）rotateZ（-360deg）rotateY 360deg）; 
} 
} 
 
 
 @keyframes rotate-front-0 {
 0％{
 transform：perspective（1920px）translateX（ - 360px）translateZ（-150px）rotateX（-0deg）rotateY（0deg）; 
} 
 100％{
 transform：perspective（1920px）translateX（-360px）translateZ（-150px）rotateX（-360deg）rotateY（360deg）; 
} 
} 
 @keyframes rotate-back-0 {
 0％{
 transform：perspective（1920px）translateX（-360px）translateZ （180deg）rotateX（-0deg）rotationY（0deg）; 
} 
 100％{
 transform：perspective（1920px）translateX（-360px）translateZ（-150px）rotateX（180deg）rotateX（-360deg）rotateY（-360deg） 
} 
} 
 @keyframes rotate-top-0 {
 0％{
 transform：translateY（50px）perspective（1920px）translateX（-360px）translateZ -150px）rotateX（90deg）rotateX（-0deg）rotateZ（-0deg）; 
} 
 100％{
 transform：translateY（50px）perspective（1920px）translateX（-360px）translateZ（-150px）rotateX（90deg）rotateX（-360deg）rotateZ（-360deg） ; 
} 
} 
 @keyframes rotate-bottom-0 {
 0％{
 transform：translateY（50px）perspective（1920px）translateX（-360px）translateZ -150px）rotateX（-90deg）rotateX（-0deg）rotateZ（-0deg）; 
} 
 100％{
 transform：translateY（50px）透视图（1920像素）translateX（-360像素）translateZ（-150像素）rotateX（-90deg）rotateX（-360deg） ; 
} 
} 
 @keyframes rotate-left-0 {
 0％{
 transform：translateX（-30px）perspective（1920px）translateX（-360px）translateZ （-150px）rotateY（-90deg）rotateZ（0deg）rotateY（0deg）; 
} 
 100％{
 transform：translateX（-30px）透视图（1920像素）translateX（-360像素）translateZ（-150像素）rotateY（-90deg）rotateZ（360deg） ; 
} 
} 
 @keyframes rotate-right-0 {
 0％{
 transform：translateX（-30px）perspective（1920px）translateX（-360px）translateZ （-150像素）rotateY（90deg）rotateZ（0deg）rotateY（0deg）; 
} 
 100％{
 transform：translateX（-30px）perspective（1920px）translateX（-360px）translateZ（-150px）rotateY（90deg）rotateZ（-360deg） ; 
} 
} 
 @keyframes rotate-front-1 {
 0％{
 transform：perspective（1920px）translateX（-120px）translateZ （-0deg）rotationY（0deg）; 
} 
 100％{
 transform：perspective（1920px）translateX（-120px）translateZ（-150px）rotateX（-360deg）rotateY（360deg）; 
} 
} 
 @keyframes rotate-back-1 {
 0％{
 transform：perspective（1920px）translateX（-120px）translateZ （180deg）rotateX（-0deg）rotationY（0deg）; 
} 
 100％{
 transform：perspective（1920px）translateX（-120px）translateZ（-150px）rotateX（180deg）rotateX（-360deg）rotateY（-360deg）; 
} 
} 
 @keyframes rotate-top-1 {
 0％{
 transform：translateY（50px）perspective（1920px）translateX（-120px）translateZ -150px）rotateX（90deg）rotateX（-0deg）rotateZ（-0deg）; 
} 
 100％{
 transform：translateY（50px）perspective（1920px）translateX（-120px）translateZ（-150px）rotateX（90deg）rotateX（-360deg）rotateZ（-360deg） ; 
} 
} 
 @keyframes rotate-bottom-1 {
 0％{
 transform：translateY（50px）perspective（1920px）translateX（-120px）translateZ -150px）rotateX（-90deg）rotateX（-0deg）rotateZ（-0deg）; 
} 
 100％{
 transform：translateY（50px）perspective（1920px）translateX（-120px）translateZ（-150px）rotateX（-90deg）rotateX（-360deg）rotateZ（360deg） ; 
} 
} 
 @keyframes rotate-left-1 {
 0％{
 transform：translateX（-30px）perspective（1920px）translateX（-120px）translateZ （-150px）rotateY（-90deg）rotateZ（0deg）rotateY（0deg）; 
} 
 100％{
 transform：translateX（-30px）perspective（1920px）translateX（-120px）translateZ（-150px）rotateY（-90deg）rotateZ（360deg） ; 
} 
} 
 @keyframes rotate-right-1 {
 0％{
 transform：translateX（-30px）perspective（1920px）translateX（-120px）translateZ （-150像素）rotateY（90deg）rotateZ（0deg）rotateY（0deg）; 
} 
 100％{
 transform：translateX（-30px）透视图（1920像素）translateX（-120像素）translateZ（-150像素）rotateY（90deg）rotateZ（-360deg） ; 
} 
} 
 @keyframes rotate-front-2 {
 0％{
 transform：perspective（1920px）translateX（120px）translateZ（-150px）rotateX -0deg）rotateY（0deg）; 
} 
 100％{
 transform：perspective（1920px）translateX（120px）translateZ（-150px）rotateX（-360deg）rotateY（360deg）; 
} 
} 
 @keyframes rotation-back-2 {
 0％{
 transform：perspective（1920px）translateX（120px）translateZ（-150px）rotateX 180deg）rotateX（-0deg）rotationY（0deg）; 
} 
 100％{
 transform：perspective（1920px）translateX（120px）translateZ（-150px）rotateX（180deg）rotateX（-360deg）rotateY（-360deg） 
} 
} 
 @keyframes rotate-top-2 {
 0％{
 transform：translateY（50px）perspective（1920px）translateX 150px）rotateX（90deg）rotateX（-0deg）rotateZ（-0deg）; 
} 
 100％{
 transform：translateY（50px）perspective（1920px）translateX（120px）translateZ（-150px）rotateX（90deg）rotateX（-360deg）rotateZ（-360deg）; 
} 
} 
 @keyframes rotate-bottom-2 {
 0％{
 transform：translateY（50px）perspective（1920px）translateX 150px）rotateX（-90deg）rotateX（-0deg）rotateZ（-0deg）; 
} 
 100％{
 transform：translateY（50px）perspective（1920px）translateX（120px）translateZ（-150px）rotateX（-90deg）rotateX（-360deg）rotateZ（360deg）; 
} 
} 
 @keyframes rotate-left-2 {
 0％{
 transform：translateX（-30px）perspective（1920px）translateX（120px）translateZ -150px）rotateY（-90deg）rotateZ（0deg）rotateY（0deg）; 
} 
 100％{
 transform：translateX（-30px）perspective（1920px）translateX（120px）translateZ（-150px）rotateY（-90deg）rotateZ（360deg）rotateY 
     } 
 } 
 @keyframes rotate-right-2 { 
     0% { 
         transform: translateX(-30px) perspective(1920px) translateX(120px) translateZ(-150px) rotateY(90deg) rotateZ(0deg) rotateY(0deg); 
     } 
     100% { 
         transform: translateX(-30px) perspective(1920px) translateX(120px) translateZ(-150px) rotateY(90deg) rotateZ(-360deg) rotateY(360deg); 
     } 
 } 
 @keyframes rotate-front-3 { 
     0% { 
         transform: perspective(1920px) translateX(360px) translateZ(-150px) rotateX(-0deg) rotateY(0deg); 
     } 
     100% { 
         transform: perspective(1920px) translateX(360px) translateZ(-150px) rotateX(-360deg) rotateY(360deg); 
     } 
 } 
 @keyframes rotate-back-3 { 
     0% { 
         transform: perspective(1920px) translateX(360px) translateZ(-150px) rotateX(180deg) rotateX(-0deg) rotateY(0deg); 
     } 
     100% { 
         transform: perspective(1920px) translateX(360px) translateZ(-150px) rotateX(180deg) rotateX(-360deg) rotateY(-360deg); 
     } 
 } 
 @keyframes rotate-top-3 { 
     0% { 
         transform: translateY(50px) perspective(1920px) translateX(360px) translateZ(-150px) rotateX(90deg) rotateX(-0deg) rotateZ(-0deg); 
     } 
     100% { 
         transform: translateY(50px) perspective(1920px) translateX(360px) translateZ(-150px) rotateX(90deg) rotateX(-360deg) rotateZ(-360deg); 
     } 
 } 
 @keyframes rotate-bottom-3 { 
     0% { 
         transform: translateY(50px) perspective(1920px) translateX(360px) translateZ(-150px) rotateX(-90deg) rotateX(-0deg) rotateZ(-0deg); 
     } 
     100% { 
         transform: translateY(50px) perspective(1920px) translateX(360px) translateZ(-150px) rotateX(-90deg) rotateX(-360deg) rotateZ(360deg); 
     } 
 } 
 @keyframes rotate-left-3 { 
     0% { 
         transform: translateX(-30px) perspective(1920px) translateX(360px) translateZ(-150px) rotateY(-90deg) rotateZ(0deg) rotateY(0deg); 
     } 
     100% { 
         transform: translateX(-30px) perspective(1920px) translateX(360px) translateZ(-150px) rotateY(-90deg) rotateZ(360deg) rotateY(360deg); 
     } 
 } 
 @keyframes rotate-right-3 { 
     0% { 
         transform: translateX(-30px) perspective(1920px) translateX(360px) translateZ(-150px) rotateY(90deg) rotateZ(0deg) rotateY(0deg); 
     } 
     100% { 
         transform: translateX(-30px) perspective(1920px) translateX(360px) translateZ(-150px) rotateY(90deg) rotateZ(-360deg) rotateY(360deg); 
} 
} 
  

So after struggeling with IE glitches and incompatibilities, I've finally got my correctly sized cuboid working (update: here's an example of it). Animating requires to animate all sides separately instead of a single parent element, however this seems to be the only way to get it working in IE.

Using a single cuboid works fine, multiple cuboids however are problematic, since perspective is applied to the single transformed elements (which is necessary in order to work in IE) they do all look the same, regardless of their position on the stage:

http://jsfiddle.net/YsPmm/

If perspective would be applied to the stage, the vanishing point would sit in its center, causing the child objects to be transformed accordingly, and that's what I'm trying to recreate (while maintaining IE compatibility!):

http://jsfiddle.net/kbhej/

Unfortunately it looks like applying perspective-origin to the single elements doesn't work, so I'm wondering if anyone has any other ideas how to achieve this effect?

---

Code for the jsfiddle examples

Perspective on single elements:

<!doctype html>
<html>
    <head>
        <style>
        .stage {
            width: 800px;
            height: 800px;
            background: #f6f6f6;
        }
        .wrapper, .top, .front{
            position: absolute;
            width: 200px;
            height: 200px;

            -webkit-backface-visibility: hidden;
            -moz-backface-visibility: hidden;
            backface-visibility: hidden;
        }
        .wrapper:nth-child(1) {
            z-index: 4;
        }
        .wrapper:nth-child(2) {
            left: 200px;
            z-index: 3;
        }
        .wrapper:nth-child(3) {
            left: 400px;
            z-index: 2;
        }
        .wrapper:nth-child(4) {
            left: 600px;
            z-index: 1;
        }

        .top {
            background-color: #00ff00;

            -webkit-transform-origin: 50% 50% -100px;
               -moz-transform-origin: 50% 50% -100px;
                    transform-origin: 50% 50% -100px;

            -webkit-transform: perspective(200px) translateZ(-100px) rotateX(90deg) rotateX(-45deg);
               -moz-transform: perspective(200px) translateZ(-100px) rotateX(90deg) rotateX(-45deg);
                    transform: perspective(200px) translateZ(-100px) rotateX(90deg) rotateX(-45deg);
        }

        .front {
            background-color: #ff0000;

            -webkit-transform-origin: 50% 50% -100px;
               -moz-transform-origin: 50% 50% -100px;
                    transform-origin: 50% 50% -100px;

            -webkit-transform: perspective(200px) translateZ(-100px) rotateX(-45deg);
               -moz-transform: perspective(200px) translateZ(-100px) rotateX(-45deg);
                    transform: perspective(200px) translateZ(-100px) rotateX(-45deg);
        }
        </style>
    </head>
    <body>
        <div class='stage'>
            <div class='wrapper'>
                <div class='top'></div>
                <div class='front'></div>
            </div>

            <div class='wrapper'>
                <div class='top'></div>
                <div class='front'></div>
            </div>

            <div class='wrapper'>
                <div class='top'></div>
                <div class='front'></div>
            </div>

            <div class='wrapper'>
                <div class='top'></div>
                <div class='front'></div>
            </div>
        </div>
    </body>
</html>

Perspective on the stage:

<!doctype html>
<html>
    <head>
        <style>
        .stage {
            width: 800px;
            height: 800px;
            background: #f6f6f6;

            -webkit-perspective: 800px;
               -moz-perspective: 800px;
                    perspective: 800px;
        }
        .wrapper, .top, .front{
            position: absolute;
            width: 200px;
            height: 200px;

            -webkit-backface-visibility: hidden;
            -moz-backface-visibility: hidden;
            backface-visibility: hidden;

            -webkit-transform-style: preserve-3d;
               -moz-transform-style: preserve-3d;
                    transform-style: preserve-3d;
        }
        .wrapper:nth-child(1) {
            z-index: 4;
        }
        .wrapper:nth-child(2) {
            left: 200px;
            z-index: 3;
        }
        .wrapper:nth-child(3) {
            left: 400px;
            z-index: 2;
        }
        .wrapper:nth-child(4) {
            left: 600px;
            z-index: 1;
        }

        .wrapper {    
            -webkit-transform: rotate3d(1, 0, 0, -45deg) translate3d(0, 50px, 50px);
               -moz-transform: rotate3d(1, 0, 0, -45deg) translate3d(0, 50px, 50px);
                    transform: rotate3d(1, 0, 0, -45deg) translate3d(0, 50px, 50px);
        }

        .top {
            background-color: #00ff00;
            -webkit-transform: rotate3d(1, 0, 0, 90deg) translate3d(0, -100px, 100px);
               -moz-transform: rotate3d(1, 0, 0, 90deg) translate3d(0, -100px, 100px);
                    transform: rotate3d(1, 0, 0, 90deg) translate3d(0, -100px, 100px);
        }

        .front {
            background-color: #ff0000;
        }
        </style>
    </head>
    <body>
        <div class='stage'>
            <div class='wrapper'>
                <div class='top'></div>
                <div class='front'></div>
            </div>

            <div class='wrapper'>
                <div class='top'></div>
                <div class='front'></div>
            </div>

            <div class='wrapper'>
                <div class='top'></div>
                <div class='front'></div>
            </div>

            <div class='wrapper'>
                <div class='top'></div>
                <div class='front'></div>
            </div>
        </div>
    </body>
</html>

解决方案

So here we go, as shown by vals, perspective is respected when using transform:translate to position the faces on the stage, so I figured that the trick is to position the cuboid wrappes in the center of the stage, apply perspective using the perspective() function, and then translate the faces positions accordingly.

Here's an example, it works fine (fine as in as expected) in IE10/11 and Chrome, in Firefox there's a lot of flickering when the faces of the individual cubes intersect each other, and in Safari (for Windows) the faces are clipped when they intersect (tough it looks like this is actually the correct behaviour, and Firefox, Chrome and IE are wrong. update Let me take that back, actually it looks like Safari is doing it wrong since only elements in the same 3d rendering context are ment to intersect). However, the main goal was IE compatibiilty, and even though it's a an annoyingly large amount of extra CSS, it's working, so...

http://jsfiddle.net/EDzXM/

---

Code for the jsfiddle example

HTML:

<div class='wrapper'>
    <div class='front'>Front</div>
    <div class='back'>Back</div>
    <div class='top'>Top</div>
    <div class='bottom'>Bottom</div>
    <div class='left'>Left</div>
    <div class='right'>Right</div>
</div>
<div class='wrapper'>
    <div class='front'>Front</div>
    <div class='back'>Back</div>
    <div class='top'>Top</div>
    <div class='bottom'>Bottom</div>
    <div class='left'>Left</div>
    <div class='right'>Right</div>
</div>
<div class='wrapper'>
    <div class='front'>Front</div>
    <div class='back'>Back</div>
    <div class='top'>Top</div>
    <div class='bottom'>Bottom</div>
    <div class='left'>Left</div>
    <div class='right'>Right</div>
</div>
<div class='wrapper'>
    <div class='front'>Front</div>
    <div class='back'>Back</div>
    <div class='top'>Top</div>
    <div class='bottom'>Bottom</div>
    <div class='left'>Left</div>
    <div class='right'>Right</div>
</div>

CSS:

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.wrapper {
    position: absolute;
    left: 50%;
    margin-left: -120px;

    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
.wrapper:nth-child(1) {
    z-index: 1;
}
.wrapper:nth-child(2) {
    z-index: 2;
}
.wrapper:nth-child(3) {
    z-index: 1;
}
.wrapper:nth-child(4) {
    z-index: 0;
}
.top, .front, .back, .bottom, .left, .right {
    position: absolute;
    width: 240px;
    height: 400px;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    text-align: center;
    line-height: 400px;

    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;

    -webkit-animation-duration: 25s;
    animation-duration: 25s;

    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;

    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
.top, .bottom {
    height: 300px;
    line-height: 300px;
}
.left, .right {
    width: 300px;
}
.front, .back {
    -webkit-transform-origin: 50% 50% -150px;
    transform-origin: 50% 50% -150px;
}
.top, .bottom {
    -webkit-transform-origin: 50% 50% -200px;
    transform-origin: 50% 50% -200px;
}
.left, .right {
    -webkit-transform-origin: 50% 50% -120px;
    transform-origin: 50% 50% -120px;
}
.front {
    background-color: #ff0000;
}
.back {
    background-color: #00cc00;
}
.top {
    background-color: #0000ff;
}
.bottom {
    background-color: #cccc00;
}
.left {
    background-color: #00cccc;
}
.right {
    background-color: #ff00ff;
}
.wrapper:nth-child(1) .front {
    -webkit-animation-name: rotate-front-0;
    animation-name: rotate-front-0;
}
.wrapper:nth-child(1) .back {
    -webkit-animation-name: rotate-back-0;
    animation-name: rotate-back-0;
}
.wrapper:nth-child(1) .top {
    -webkit-animation-name: rotate-top-0;
    animation-name: rotate-top-0;
}
.wrapper:nth-child(1) .bottom {
    -webkit-animation-name: rotate-bottom-0;
    animation-name: rotate-bottom-0;
}
.wrapper:nth-child(1) .left {
    -webkit-animation-name: rotate-left-0;
    animation-name: rotate-left-0;
}
.wrapper:nth-child(1) .right {
    -webkit-animation-name: rotate-right-0;
    animation-name: rotate-right-0;
}
.wrapper:nth-child(2) .front {

    -webkit-animation-name: rotate-front-1;
    animation-name: rotate-front-1;
}
.wrapper:nth-child(2) .back {

    -webkit-animation-name: rotate-back-1;
    animation-name: rotate-back-1;
}
.wrapper:nth-child(2) .top {

    -webkit-animation-name: rotate-top-1;
    animation-name: rotate-top-1;
}
.wrapper:nth-child(2) .bottom {

    -webkit-animation-name: rotate-bottom-1;
    animation-name: rotate-bottom-1;
}
.wrapper:nth-child(2) .left {

    -webkit-animation-name: rotate-left-1;
    animation-name: rotate-left-1;
}
.wrapper:nth-child(2) .right {

    -webkit-animation-name: rotate-right-1;
    animation-name: rotate-right-1;
}
.wrapper:nth-child(3) .front {

    -webkit-animation-name: rotate-front-2;
    animation-name: rotate-front-2;
}
.wrapper:nth-child(3) .back {

    -webkit-animation-name: rotate-back-2;
    animation-name: rotate-back-2;
}
.wrapper:nth-child(3) .top {

    -webkit-animation-name: rotate-top-2;
    animation-name: rotate-top-2;
}
.wrapper:nth-child(3) .bottom {

    -webkit-animation-name: rotate-bottom-2;
    animation-name: rotate-bottom-2;
}
.wrapper:nth-child(3) .left {

    -webkit-animation-name: rotate-left-2;
    animation-name: rotate-left-2;
}
.wrapper:nth-child(3) .right {

    -webkit-animation-name: rotate-right-2;
    animation-name: rotate-right-2;
}
.wrapper:nth-child(4) .front {

    -webkit-animation-name: rotate-front-3;
    animation-name: rotate-front-3;
}
.wrapper:nth-child(4) .back {

    -webkit-animation-name: rotate-back-3;
    animation-name: rotate-back-3;
}
.wrapper:nth-child(4) .top {

    -webkit-animation-name: rotate-top-3;
    animation-name: rotate-top-3;
}
.wrapper:nth-child(4) .bottom {

    -webkit-animation-name: rotate-bottom-3;
    animation-name: rotate-bottom-3;
}
.wrapper:nth-child(4) .left {

    -webkit-animation-name: rotate-left-3;
    animation-name: rotate-left-3;
}
.wrapper:nth-child(4) .right {

    -webkit-animation-name: rotate-right-3;
    animation-name: rotate-right-3;
}
@-webkit-keyframes rotate-front-0 {
    0% {
        -webkit-transform: perspective(1920px) translateX(-360px) translateZ(-150px) rotateX(-0deg) rotateY(0deg);
    }
    100% {
        -webkit-transform: perspective(1920px) translateX(-360px) translateZ(-150px) rotateX(-360deg) rotateY(360deg);
    }
}
@-webkit-keyframes rotate-back-0 {
    0% {
        -webkit-transform: perspective(1920px) translateX(-360px) translateZ(-150px) rotateX(180deg) rotateX(-0deg) rotateY(0deg);
    }
    100% {
        -webkit-transform: perspective(1920px) translateX(-360px) translateZ(-150px) rotateX(180deg) rotateX(-360deg) rotateY(-360deg);
    }
}
@-webkit-keyframes rotate-top-0 {
    0% {
        -webkit-transform: translateY(50px) perspective(1920px) translateX(-360px) translateZ(-150px) rotateX(90deg) rotateX(-0deg) rotateZ(-0deg);
    }
    100% {
        -webkit-transform: translateY(50px) perspective(1920px) translateX(-360px) translateZ(-150px) rotateX(90deg) rotateX(-360deg) rotateZ(-360deg);
    }
}
@-webkit-keyframes rotate-bottom-0 {
    0% {
        -webkit-transform: translateY(50px) perspective(1920px) translateX(-360px) translateZ(-150px) rotateX(-90deg) rotateX(-0deg) rotateZ(-0deg);
    }
    100% {
        -webkit-transform: translateY(50px) perspective(1920px) translateX(-360px) translateZ(-150px) rotateX(-90deg) rotateX(-360deg) rotateZ(360deg);
    }
}
@-webkit-keyframes rotate-left-0 {
    0% {
        -webkit-transform: translateX(-30px) perspective(1920px) translateX(-360px) translateZ(-150px) rotateY(-90deg) rotateZ(0deg) rotateY(0deg);
    }
    100% {
        -webkit-transform: translateX(-30px) perspective(1920px) translateX(-360px) translateZ(-150px) rotateY(-90deg) rotateZ(360deg) rotateY(360deg);
    }
}
@-webkit-keyframes rotate-right-0 {
    0% {
        -webkit-transform: translateX(-30px) perspective(1920px) translateX(-360px) translateZ(-150px) rotateY(90deg) rotateZ(0deg) rotateY(0deg);
    }
    100% {
        -webkit-transform: translateX(-30px) perspective(1920px) translateX(-360px) translateZ(-150px) rotateY(90deg) rotateZ(-360deg) rotateY(360deg);
    }
}
@-webkit-keyframes rotate-front-1 {
    0% {
        -webkit-transform: perspective(1920px) translateX(-120px) translateZ(-150px) rotateX(-0deg) rotateY(0deg);
    }
    100% {
        -webkit-transform: perspective(1920px) translateX(-120px) translateZ(-150px) rotateX(-360deg) rotateY(360deg);
    }
}
@-webkit-keyframes rotate-back-1 {
    0% {
        -webkit-transform: perspective(1920px) translateX(-120px) translateZ(-150px) rotateX(180deg) rotateX(-0deg) rotateY(0deg);
    }
    100% {
        -webkit-transform: perspective(1920px) translateX(-120px) translateZ(-150px) rotateX(180deg) rotateX(-360deg) rotateY(-360deg);
    }
}
@-webkit-keyframes rotate-top-1 {
    0% {
        -webkit-transform: translateY(50px) perspective(1920px) translateX(-120px) translateZ(-150px) rotateX(90deg) rotateX(-0deg) rotateZ(-0deg);
    }
    100% {
        -webkit-transform: translateY(50px) perspective(1920px) translateX(-120px) translateZ(-150px) rotateX(90deg) rotateX(-360deg) rotateZ(-360deg);
    }
}
@-webkit-keyframes rotate-bottom-1 {
    0% {
        -webkit-transform: translateY(50px) perspective(1920px) translateX(-120px) translateZ(-150px) rotateX(-90deg) rotateX(-0deg) rotateZ(-0deg);
    }
    100% {
        -webkit-transform: translateY(50px) perspective(1920px) translateX(-120px) translateZ(-150px) rotateX(-90deg) rotateX(-360deg) rotateZ(360deg);
    }
}
@-webkit-keyframes rotate-left-1 {
    0% {
        -webkit-transform: translateX(-30px) perspective(1920px) translateX(-120px) translateZ(-150px) rotateY(-90deg) rotateZ(0deg) rotateY(0deg);
    }
    100% {
        -webkit-transform: translateX(-30px) perspective(1920px) translateX(-120px) translateZ(-150px) rotateY(-90deg) rotateZ(360deg) rotateY(360deg);
    }
}
@-webkit-keyframes rotate-right-1 {
    0% {
        -webkit-transform: translateX(-30px) perspective(1920px) translateX(-120px) translateZ(-150px) rotateY(90deg) rotateZ(0deg) rotateY(0deg);
    }
    100% {
        -webkit-transform: translateX(-30px) perspective(1920px) translateX(-120px) translateZ(-150px) rotateY(90deg) rotateZ(-360deg) rotateY(360deg);
    }
}
@-webkit-keyframes rotate-front-2 {
    0% {
        -webkit-transform: perspective(1920px) translateX(120px) translateZ(-150px) rotateX(-0deg) rotateY(0deg);
    }
    100% {
        -webkit-transform: perspective(1920px) translateX(120px) translateZ(-150px) rotateX(-360deg) rotateY(360deg);
    }
}
@-webkit-keyframes rotate-back-2 {
    0% {
        -webkit-transform: perspective(1920px) translateX(120px) translateZ(-150px) rotateX(180deg) rotateX(-0deg) rotateY(0deg);
    }
    100% {
        -webkit-transform: perspective(1920px) translateX(120px) translateZ(-150px) rotateX(180deg) rotateX(-360deg) rotateY(-360deg);
    }
}
@-webkit-keyframes rotate-top-2 {
    0% {
        -webkit-transform: translateY(50px) perspective(1920px) translateX(120px) translateZ(-150px) rotateX(90deg) rotateX(-0deg) rotateZ(-0deg);
    }
    100% {
        -webkit-transform: translateY(50px) perspective(1920px) translateX(120px) translateZ(-150px) rotateX(90deg) rotateX(-360deg) rotateZ(-360deg);
    }
}
@-webkit-keyframes rotate-bottom-2 {
    0% {
        -webkit-transform: translateY(50px) perspective(1920px) translateX(120px) translateZ(-150px) rotateX(-90deg) rotateX(-0deg) rotateZ(-0deg);
    }
    100% {
        -webkit-transform: translateY(50px) perspective(1920px) translateX(120px) translateZ(-150px) rotateX(-90deg) rotateX(-360deg) rotateZ(360deg);
    }
}
@-webkit-keyframes rotate-left-2 {
    0% {
        -webkit-transform: translateX(-30px) perspective(1920px) translateX(120px) translateZ(-150px) rotateY(-90deg) rotateZ(0deg) rotateY(0deg);
    }
    100% {
        -webkit-transform: translateX(-30px) perspective(1920px) translateX(120px) translateZ(-150px) rotateY(-90deg) rotateZ(360deg) rotateY(360deg);
    }
}
@-webkit-keyframes rotate-right-2 {
    0% {
        -webkit-transform: translateX(-30px) perspective(1920px) translateX(120px) translateZ(-150px) rotateY(90deg) rotateZ(0deg) rotateY(0deg);
    }
    100% {
        -webkit-transform: translateX(-30px) perspective(1920px) translateX(120px) translateZ(-150px) rotateY(90deg) rotateZ(-360deg) rotateY(360deg);
    }
}
@-webkit-keyframes rotate-front-3 {
    0% {
        -webkit-transform: perspective(1920px) translateX(360px) translateZ(-150px) rotateX(-0deg) rotateY(0deg);
    }
    100% {
        -webkit-transform: perspective(1920px) translateX(360px) translateZ(-150px) rotateX(-360deg) rotateY(360deg);
    }
}
@-webkit-keyframes rotate-back-3 {
    0% {
        -webkit-transform: perspective(1920px) translateX(360px) translateZ(-150px) rotateX(180deg) rotateX(-0deg) rotateY(0deg);
    }
    100% {
        -webkit-transform: perspective(1920px) translateX(360px) translateZ(-150px) rotateX(180deg) rotateX(-360deg) rotateY(-360deg);
    }
}
@-webkit-keyframes rotate-top-3 {
    0% {
        -webkit-transform: translateY(50px) perspective(1920px) translateX(360px) translateZ(-150px) rotateX(90deg) rotateX(-0deg) rotateZ(-0deg);
    }
    100% {
        -webkit-transform: translateY(50px) perspective(1920px) translateX(360px) translateZ(-150px) rotateX(90deg) rotateX(-360deg) rotateZ(-360deg);
    }
}
@-webkit-keyframes rotate-bottom-3 {
    0% {
        -webkit-transform: translateY(50px) perspective(1920px) translateX(360px) translateZ(-150px) rotateX(-90deg) rotateX(-0deg) rotateZ(-0deg);
    }
    100% {
        -webkit-transform: translateY(50px) perspective(1920px) translateX(360px) translateZ(-150px) rotateX(-90deg) rotateX(-360deg) rotateZ(360deg);
    }
}
@-webkit-keyframes rotate-left-3 {
    0% {
        -webkit-transform: translateX(-30px) perspective(1920px) translateX(360px) translateZ(-150px) rotateY(-90deg) rotateZ(0deg) rotateY(0deg);
    }
    100% {
        -webkit-transform: translateX(-30px) perspective(1920px) translateX(360px) translateZ(-150px) rotateY(-90deg) rotateZ(360deg) rotateY(360deg);
    }
}
@-webkit-keyframes rotate-right-3 {
    0% {
        -webkit-transform: translateX(-30px) perspective(1920px) translateX(360px) translateZ(-150px) rotateY(90deg) rotateZ(0deg) rotateY(0deg);
    }
    100% {
        -webkit-transform: translateX(-30px) perspective(1920px) translateX(360px) translateZ(-150px) rotateY(90deg) rotateZ(-360deg) rotateY(360deg);
    }
}


@keyframes rotate-front-0 {
    0% {
        transform: perspective(1920px) translateX(-360px) translateZ(-150px) rotateX(-0deg) rotateY(0deg);
    }
    100% {
        transform: perspective(1920px) translateX(-360px) translateZ(-150px) rotateX(-360deg) rotateY(360deg);
    }
}
@keyframes rotate-back-0 {
    0% {
        transform: perspective(1920px) translateX(-360px) translateZ(-150px) rotateX(180deg) rotateX(-0deg) rotateY(0deg);
    }
    100% {
        transform: perspective(1920px) translateX(-360px) translateZ(-150px) rotateX(180deg) rotateX(-360deg) rotateY(-360deg);
    }
}
@keyframes rotate-top-0 {
    0% {
        transform: translateY(50px) perspective(1920px) translateX(-360px) translateZ(-150px) rotateX(90deg) rotateX(-0deg) rotateZ(-0deg);
    }
    100% {
        transform: translateY(50px) perspective(1920px) translateX(-360px) translateZ(-150px) rotateX(90deg) rotateX(-360deg) rotateZ(-360deg);
    }
}
@keyframes rotate-bottom-0 {
    0% {
        transform: translateY(50px) perspective(1920px) translateX(-360px) translateZ(-150px) rotateX(-90deg) rotateX(-0deg) rotateZ(-0deg);
    }
    100% {
        transform: translateY(50px) perspective(1920px) translateX(-360px) translateZ(-150px) rotateX(-90deg) rotateX(-360deg) rotateZ(360deg);
    }
}
@keyframes rotate-left-0 {
    0% {
        transform: translateX(-30px) perspective(1920px) translateX(-360px) translateZ(-150px) rotateY(-90deg) rotateZ(0deg) rotateY(0deg);
    }
    100% {
        transform: translateX(-30px) perspective(1920px) translateX(-360px) translateZ(-150px) rotateY(-90deg) rotateZ(360deg) rotateY(360deg);
    }
}
@keyframes rotate-right-0 {
    0% {
        transform: translateX(-30px) perspective(1920px) translateX(-360px) translateZ(-150px) rotateY(90deg) rotateZ(0deg) rotateY(0deg);
    }
    100% {
        transform: translateX(-30px) perspective(1920px) translateX(-360px) translateZ(-150px) rotateY(90deg) rotateZ(-360deg) rotateY(360deg);
    }
}
@keyframes rotate-front-1 {
    0% {
        transform: perspective(1920px) translateX(-120px) translateZ(-150px) rotateX(-0deg) rotateY(0deg);
    }
    100% {
        transform: perspective(1920px) translateX(-120px) translateZ(-150px) rotateX(-360deg) rotateY(360deg);
    }
}
@keyframes rotate-back-1 {
    0% {
        transform: perspective(1920px) translateX(-120px) translateZ(-150px) rotateX(180deg) rotateX(-0deg) rotateY(0deg);
    }
    100% {
        transform: perspective(1920px) translateX(-120px) translateZ(-150px) rotateX(180deg) rotateX(-360deg) rotateY(-360deg);
    }
}
@keyframes rotate-top-1 {
    0% {
        transform: translateY(50px) perspective(1920px) translateX(-120px) translateZ(-150px) rotateX(90deg) rotateX(-0deg) rotateZ(-0deg);
    }
    100% {
        transform: translateY(50px) perspective(1920px) translateX(-120px) translateZ(-150px) rotateX(90deg) rotateX(-360deg) rotateZ(-360deg);
    }
}
@keyframes rotate-bottom-1 {
    0% {
        transform: translateY(50px) perspective(1920px) translateX(-120px) translateZ(-150px) rotateX(-90deg) rotateX(-0deg) rotateZ(-0deg);
    }
    100% {
        transform: translateY(50px) perspective(1920px) translateX(-120px) translateZ(-150px) rotateX(-90deg) rotateX(-360deg) rotateZ(360deg);
    }
}
@keyframes rotate-left-1 {
    0% {
        transform: translateX(-30px) perspective(1920px) translateX(-120px) translateZ(-150px) rotateY(-90deg) rotateZ(0deg) rotateY(0deg);
    }
    100% {
        transform: translateX(-30px) perspective(1920px) translateX(-120px) translateZ(-150px) rotateY(-90deg) rotateZ(360deg) rotateY(360deg);
    }
}
@keyframes rotate-right-1 {
    0% {
        transform: translateX(-30px) perspective(1920px) translateX(-120px) translateZ(-150px) rotateY(90deg) rotateZ(0deg) rotateY(0deg);
    }
    100% {
        transform: translateX(-30px) perspective(1920px) translateX(-120px) translateZ(-150px) rotateY(90deg) rotateZ(-360deg) rotateY(360deg);
    }
}
@keyframes rotate-front-2 {
    0% {
        transform: perspective(1920px) translateX(120px) translateZ(-150px) rotateX(-0deg) rotateY(0deg);
    }
    100% {
        transform: perspective(1920px) translateX(120px) translateZ(-150px) rotateX(-360deg) rotateY(360deg);
    }
}
@keyframes rotate-back-2 {
    0% {
        transform: perspective(1920px) translateX(120px) translateZ(-150px) rotateX(180deg) rotateX(-0deg) rotateY(0deg);
    }
    100% {
        transform: perspective(1920px) translateX(120px) translateZ(-150px) rotateX(180deg) rotateX(-360deg) rotateY(-360deg);
    }
}
@keyframes rotate-top-2 {
    0% {
        transform: translateY(50px) perspective(1920px) translateX(120px) translateZ(-150px) rotateX(90deg) rotateX(-0deg) rotateZ(-0deg);
    }
    100% {
        transform: translateY(50px) perspective(1920px) translateX(120px) translateZ(-150px) rotateX(90deg) rotateX(-360deg) rotateZ(-360deg);
    }
}
@keyframes rotate-bottom-2 {
    0% {
        transform: translateY(50px) perspective(1920px) translateX(120px) translateZ(-150px) rotateX(-90deg) rotateX(-0deg) rotateZ(-0deg);
    }
    100% {
        transform: translateY(50px) perspective(1920px) translateX(120px) translateZ(-150px) rotateX(-90deg) rotateX(-360deg) rotateZ(360deg);
    }
}
@keyframes rotate-left-2 {
    0% {
        transform: translateX(-30px) perspective(1920px) translateX(120px) translateZ(-150px) rotateY(-90deg) rotateZ(0deg) rotateY(0deg);
    }
    100% {
        transform: translateX(-30px) perspective(1920px) translateX(120px) translateZ(-150px) rotateY(-90deg) rotateZ(360deg) rotateY(360deg);
    }
}
@keyframes rotate-right-2 {
    0% {
        transform: translateX(-30px) perspective(1920px) translateX(120px) translateZ(-150px) rotateY(90deg) rotateZ(0deg) rotateY(0deg);
    }
    100% {
        transform: translateX(-30px) perspective(1920px) translateX(120px) translateZ(-150px) rotateY(90deg) rotateZ(-360deg) rotateY(360deg);
    }
}
@keyframes rotate-front-3 {
    0% {
        transform: perspective(1920px) translateX(360px) translateZ(-150px) rotateX(-0deg) rotateY(0deg);
    }
    100% {
        transform: perspective(1920px) translateX(360px) translateZ(-150px) rotateX(-360deg) rotateY(360deg);
    }
}
@keyframes rotate-back-3 {
    0% {
        transform: perspective(1920px) translateX(360px) translateZ(-150px) rotateX(180deg) rotateX(-0deg) rotateY(0deg);
    }
    100% {
        transform: perspective(1920px) translateX(360px) translateZ(-150px) rotateX(180deg) rotateX(-360deg) rotateY(-360deg);
    }
}
@keyframes rotate-top-3 {
    0% {
        transform: translateY(50px) perspective(1920px) translateX(360px) translateZ(-150px) rotateX(90deg) rotateX(-0deg) rotateZ(-0deg);
    }
    100% {
        transform: translateY(50px) perspective(1920px) translateX(360px) translateZ(-150px) rotateX(90deg) rotateX(-360deg) rotateZ(-360deg);
    }
}
@keyframes rotate-bottom-3 {
    0% {
        transform: translateY(50px) perspective(1920px) translateX(360px) translateZ(-150px) rotateX(-90deg) rotateX(-0deg) rotateZ(-0deg);
    }
    100% {
        transform: translateY(50px) perspective(1920px) translateX(360px) translateZ(-150px) rotateX(-90deg) rotateX(-360deg) rotateZ(360deg);
    }
}
@keyframes rotate-left-3 {
    0% {
        transform: translateX(-30px) perspective(1920px) translateX(360px) translateZ(-150px) rotateY(-90deg) rotateZ(0deg) rotateY(0deg);
    }
    100% {
        transform: translateX(-30px) perspective(1920px) translateX(360px) translateZ(-150px) rotateY(-90deg) rotateZ(360deg) rotateY(360deg);
    }
}
@keyframes rotate-right-3 {
    0% {
        transform: translateX(-30px) perspective(1920px) translateX(360px) translateZ(-150px) rotateY(90deg) rotateZ(0deg) rotateY(0deg);
    }
    100% {
        transform: translateX(-30px) perspective(1920px) translateX(360px) translateZ(-150px) rotateY(90deg) rotateZ(-360deg) rotateY(360deg);
    }
}

这篇关于如何通过转换子元素来重新创建透视原点效果？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！