所以在与IE glitches和incompatibilities结合后，我终于得到了正确尺寸的长方体（更新： here's an example）。动画需要单独为所有边设置动画而不是单个父元素，但这似乎是让它在IE中工作的唯一方法。
使用单个长方体可以很好地工作，但是多个长方体是有问题的，因为透视应用于单个变换元素（这对于在IE中工作是必要的）它们看起来都是相同的，无论它们在舞台上的位置如何：
如果透视图将应用于舞台，消失点将位于其中心，导致子对象相应地进行转换，这就是我正在尝试重新创建的内容（同时保持IE兼容性！）：
不幸的是，将单一元素应用于透视原点看起来不起作用，所以我想知道是否有人有任何其他想法如何实现这种效果？
单一元素的透视：
<!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;
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>
答案 0 :(得分：3)
我已保留原始HTML，并将CSS更改为此：
.stage {
width: 800px;
height: 800px;
background: #f6f6f6;
-webkit-perspective: 800px;
-moz-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: 0px;
z-index: 3;
}
.wrapper:nth-child(3) {
left: 0px;
z-index: 2;
}
.wrapper:nth-child(4) {
left: 0px;
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);
}
.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);
}
.front {
background-color: #ff0000;
}
/* IE specific */
.wrapper {
perspective: 800px;
perspective-origin: 400px;
}
.wrapper:nth-child(1) .top {
transform: rotate3d(1, 0, 0, -45deg) translate3d(0, 50px, 50px) rotate3d(1, 0, 0, 90deg) translate3d(0, -100px, 100px);
}
.wrapper:nth-child(1) .front {
transform: rotate3d(1, 0, 0, -45deg) translate3d(0, 50px, 50px);
}
.wrapper:nth-child(2) .top {
transform: translate3d(200px, 0px, 0px) rotate3d(1, 0, 0, -45deg) translate3d(0, 50px, 50px) rotate3d(1, 0, 0, 90deg) translate3d(0, -100px, 100px);
}
.wrapper:nth-child(2) .front {
transform: translate3d(200px, 0px, 0px) rotate3d(1, 0, 0, -45deg) translate3d(0, 50px, 50px);
}
.wrapper:nth-child(3) .top {
transform: translate3d(400px, 0px, 0px) rotate3d(1, 0, 0, -45deg) translate3d(0, 50px, 50px) rotate3d(1, 0, 0, 90deg) translate3d(0, -100px, 100px);
}
.wrapper:nth-child(3) .front {
transform: translate3d(400px, 0px, 0px) rotate3d(1, 0, 0, -45deg) translate3d(0, 50px, 50px);
}
.wrapper:nth-child(4) .top {
transform: translate3d(600px, 0px, 0px) rotate3d(1, 0, 0, -45deg) translate3d(0, 50px, 50px) rotate3d(1, 0, 0, 90deg) translate3d(0, -100px, 100px);
}
.wrapper:nth-child(4) .front {
transform: translate3d(600px, 0px, 0px) rotate3d(1, 0, 0, -45deg) translate3d(0, 50px, 50px);
}
诀窍不是使用左侧属性，而是通过变换完成所有事情。 此外，您需要专门设置perspective-origin，因为它在包装级别而不是基础级别工作。
<强>修改
我花了一些时间试图以更方便的方式完成这项工作，但我还没有成功。无论如何，我离开了我在这里所做的事情，也许它可以在某种程度上有用。
我想让html和CSS为webkit工作，在3个级别设置转换。 然后，我们的想法是为CSS设置IE的转换属性。
jQuery代码是：
function set() {
$(".top").each(function(index, value) {
var wrap = $(this).parent();
var stage = $(wrap).parent();
var tr = $(stage).css('WebkitTransform')
+ ' ' + $(wrap).css('WebkitTransform')
+ ' ' + $(this).css('WebkitTransform');
$(this).css("transform", tr);
});
}
我无法弄清楚为什么这不起作用。
答案 1 :(得分：3)
所以我们这里，shown by vals，当使用transform:translate来定位舞台上的面部时，视角得到尊重，所以我认为诀窍是将长方体的形状定位在中心位置。阶段，使用perspective()函数应用透视，然后相应地转换面部位置。
这是一个例子，它在IE10 / 11和Chrome中运行良好（在中如预期的那样），在Firefox中，当各个立方体的面相互交叉时，会有很多闪烁，并且在Safari（适用于Windows）中，面部在相交时会被剪裁（看起来这看起来确实是正确的行为，而Firefox，Chrome和IE是错误的。更新让我把它拿回去，实际上看起来Safari做错了，因为只有同一3d rendering context中的元素是ment to intersect）。然而，主要目标是IE兼容性，即使它是一个令人烦恼的大量额外的CSS，它的工作，所以......
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);
}
}