1. 首页
  2. 问题
  3. 如何通过转换子元素来重新创建透视图效果？
一尘不染

如何通过转换子元素来重新创建透视图效果？

css

因此，在克服IE的故障和不兼容之后，我终于得到了尺寸正确的长方体工作（ 更新：
）。动画需要对所有面进行单独的动画处理，而不是单个父元素，但是，这似乎是使其在IE中工作的唯一方法。

使用单个长方体效果很好，但是使用多个长方体是有问题的，因为将透视图应用于单个已变换的元素（这对于在IE中工作是必需的），无论它们在舞台上的位置如何，它们的外观都相同：

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

不幸的是，将透视图起源应用于单个元素似乎不起作用，所以我想知道是否有人对实现这种效果还有其他想法？

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;
                    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>

阅读 311

收藏
2020-05-16

共1个答案

一尘不染

因此，如vals所示，在此处transform:translate将面孔用于放置在舞台上时要尊重透视图，因此我认为诀窍是将长方体包装置于舞台中央，使用perspective()函数应用透视图，然后相应地平移面部位置。

这是一个示例，它在IE10 / 11和Chrome中工作正常（按预期工作），在Firefox中，当各个多维数据集的面彼此相交时，会有很多闪烁；在Safari（对于Windows）中，这些面被剪切了当它们相交时（坚韧看起来实际上是正确的行为，而Firefox，Chrome和IE是错误的
。update让我回顾一下，实际上看起来Safari做错了，因为只有相同[3d渲染上下文中的元素才是正确的相交。但是，主要目标是IE兼容性，即使这是一个非常烦人的大量CSS，它也可以正常工作，所以…

jsfiddle示例的代码

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);
    }
}
2020-05-16