因此，如vals所示，在此处
transform:translate将面孔用于放置在舞台上时要尊重透视图，因此我认为诀窍是将长方体包装置于舞台中央，使用
perspective()函数应用透视图，然后相应地平移面部位置。
这是一个示例，它在IE10 / 11和Chrome中工作正常（按预期工作），在Firefox中，当各个多维数据集的面彼此相交时，会有很多闪烁；在Safari（对于Windows）中，这些面被剪切了当它们相交时（坚韧看起来实际上是正确的行为，而Firefox，Chrome和IE是错误的
。update让我回顾一下，实际上看起来Safari做错了，因为只有相同[3d渲染上下文中的元素才是正确的相交。但是，主要目标是IE兼容性，即使这是一个非常烦人的大量CSS，它也可以正常工作，所以…
jsfiddle示例的代码
HTML：
<div > <div >Front</div> <div >Back</div> <div >Top</div> <div >Bottom</div> <div >Left</div> <div >Right</div></div><div > <div >Front</div> <div >Back</div> <div >Top</div> <div >Bottom</div> <div >Left</div> <div >Right</div></div><div > <div >Front</div> <div >Back</div> <div >Top</div> <div >Bottom</div> <div >Left</div> <div >Right</div></div><div > <div >Front</div> <div >Back</div> <div >Top</div> <div >Bottom</div> <div >Left</div> <div >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); }}
