登录
当前位置： 首页 > 面试题库 >

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

钮瀚
2023-03-14
问题内容：

因此，在克服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>

问题答案：

因此，如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);
    }
}


 类似资料：
  • jq通过转换现有的json来创建一个新的json

    所需输出：对于每个json对象，提取prodid_信息和序列数组，并制作一个新的json文件，格式如下： 这个jq命令是什么？ 给我以下信息： 最新问题： 我怎么也可以在另一个json以下输出？（这里的键是序列数组的每个元素，值是第一个示例json的键）：

  • 通过Selenium选择子css元素无效

    在获取元素以单击加号时，代码失败。下面是代码。 “collapser”是驻留在多个div和td下的div的类。我正在粘贴该组件的XPATH作为引用。但是XPATH并不总是相同的，而是不同的。我为元素找到了两个XPath。 XPATH:1/html/body/div[3]/div/ul/li2/div2/div[3]/div2/html/body/div[3]/div/ul/li2/div/div[

  • 如何使用共享元素转换缩放文本视图？

    我能够使用。不过，我想让文本在转换时放大。我可以看到材料设计示例在名片转换中放大了文本“Alphonso Engelking”。 我尝试在目标TextView上设置缩放属性，并使用ChangeTransform共享元素转换，但它不缩放，文本在转换时最终被截断。 如何使用共享元素转换缩放文本视图？

  • 如何使用vba创建透视表

    我是vba新手，正在尝试使用vba和Excel创建。 我想创建像下面的图像作为输入表。 我试图添加、、、的行标签，值为、和。不为SHEET1生成任何透视表。

  • 通过jQuery为将来创建的元素添加CSS规则

    问题内容： 我有一个不寻常的问题。我已经做了很多次这样的事情： 我的问题是我创建了一个，然后调用上面的命令，它可以正常工作。 现在，在另一个事件上，稍后，我从DOM中删除该元素，并在以后的时间以相同的ID重新添加它。该元素现在没有。 有没有一种方法可以在CSS中添加规则，以使其影响将来使用相同的/创建的项目？我喜欢jQuery，但是任何使用纯JavaScript的东西也都可以。 它必须是动态的，而

  • 熊猫:使用groupby重新创建数据透视表

    我有一个这样的数据帧： 我想知道我们如何使用GROUPBY实现相同的结果？ 感谢帮助。 类似的问题： Pandas列值到列？

相关阅读

通过execute_script创建元素时无法找到find_element_by_id如何在Swift的子视图类中创建警报？如何通过类名获取元素如何通过类名获取元素？创建基于sql视图的范围转换为行

相关文章

如何对python列表元素快速去重通过类型信息创建实例Django通用视图JavaTuples 元组转换JavaTuples 创建元组

相关问答

如何使用xslt转换将多个子元素添加到新的父元素中javascript - draggable如何snap到新创建的元素上？如何创建圆角视图？重新创建活动的通知意图Laravel是如何创建数据透视表的？

相关工具

透视图DemoCALayer_3d透视变换视图切换大小渐变效果视图各种动画效果图片翻转动画效果

相关文档

通过例子学 RustC 语言编程透视我们如何走到今天：重塑世界的6项创新Excel 数据透视表应用大全如何使用 Gitbook 来做笔记
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.