Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

How to recreate perspective-origin effect by transforming child elements?

Tags:

css

internet-explorer-10

css-transforms

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

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

http://jsfiddle.net/YsPmm/

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

http://jsfiddle.net/kbhej/

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

Code for the jsfiddle examples

Perspective on single elements:

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

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

        .top {
            background-color: #00ff00;

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

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

        .front {
            background-color: #ff0000;

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

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

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

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

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

Perspective on the stage:

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

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

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

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

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

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

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

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

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

            <div class='wrapper'>
                <div class='top'></div>
                <div class='front'></div>
            </div>
        </div>
    </body>
</html>
like image 832
ndm Avatar asked Jun 20 '13 00:06

ndm

2 Answers

I.E. demo

I have keept your original HTML, and changed the CSS to this one:

.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);
}

The trick is not to use left properties, and do everything thru transforms. Also, you need to set perspective-origin specifically, because it is working at the wrap level and not the base level.

Editing

I have spent some time trying to make this work in a more convenient way, bt I haven't succeeded. I leave what I have done here anyway, may be it can be in some way useful.

I wanted to leave the html and CSS working for webkit, setting transforms in the 3 levels. Then , the idea was to set the transform property for IE calculated from the CSS.

The jQuery code is:

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

I just can't figure out why this doesn't work.

like image 180
vals Avatar answered Nov 04 '22 01:11

vals

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

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

http://jsfiddle.net/EDzXM/

Code for the jsfiddle example

HTML:

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

CSS:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


@keyframes rotate-front-0 {
    0% {
        transform: perspective(1920px) translateX(-360px) translateZ(-150px) rotateX(-0deg) rotateY(0deg);
    }
    100% {
        transform: perspective(1920px) translateX(-360px) translateZ(-150px) rotateX(-360deg) rotateY(360deg);
    }
}
@keyframes rotate-back-0 {
    0% {
        transform: perspective(1920px) translateX(-360px) translateZ(-150px) rotateX(180deg) rotateX(-0deg) rotateY(0deg);
    }
    100% {
        transform: perspective(1920px) translateX(-360px) translateZ(-150px) rotateX(180deg) rotateX(-360deg) rotateY(-360deg);
    }
}
@keyframes rotate-top-0 {
    0% {
        transform: translateY(50px) perspective(1920px) translateX(-360px) translateZ(-150px) rotateX(90deg) rotateX(-0deg) rotateZ(-0deg);
    }
    100% {
        transform: translateY(50px) perspective(1920px) translateX(-360px) translateZ(-150px) rotateX(90deg) rotateX(-360deg) rotateZ(-360deg);
    }
}
@keyframes rotate-bottom-0 {
    0% {
        transform: translateY(50px) perspective(1920px) translateX(-360px) translateZ(-150px) rotateX(-90deg) rotateX(-0deg) rotateZ(-0deg);
    }
    100% {
        transform: translateY(50px) perspective(1920px) translateX(-360px) translateZ(-150px) rotateX(-90deg) rotateX(-360deg) rotateZ(360deg);
    }
}
@keyframes rotate-left-0 {
    0% {
        transform: translateX(-30px) perspective(1920px) translateX(-360px) translateZ(-150px) rotateY(-90deg) rotateZ(0deg) rotateY(0deg);
    }
    100% {
        transform: translateX(-30px) perspective(1920px) translateX(-360px) translateZ(-150px) rotateY(-90deg) rotateZ(360deg) rotateY(360deg);
    }
}
@keyframes rotate-right-0 {
    0% {
        transform: translateX(-30px) perspective(1920px) translateX(-360px) translateZ(-150px) rotateY(90deg) rotateZ(0deg) rotateY(0deg);
    }
    100% {
        transform: translateX(-30px) perspective(1920px) translateX(-360px) translateZ(-150px) rotateY(90deg) rotateZ(-360deg) rotateY(360deg);
    }
}
@keyframes rotate-front-1 {
    0% {
        transform: perspective(1920px) translateX(-120px) translateZ(-150px) rotateX(-0deg) rotateY(0deg);
    }
    100% {
        transform: perspective(1920px) translateX(-120px) translateZ(-150px) rotateX(-360deg) rotateY(360deg);
    }
}
@keyframes rotate-back-1 {
    0% {
        transform: perspective(1920px) translateX(-120px) translateZ(-150px) rotateX(180deg) rotateX(-0deg) rotateY(0deg);
    }
    100% {
        transform: perspective(1920px) translateX(-120px) translateZ(-150px) rotateX(180deg) rotateX(-360deg) rotateY(-360deg);
    }
}
@keyframes rotate-top-1 {
    0% {
        transform: translateY(50px) perspective(1920px) translateX(-120px) translateZ(-150px) rotateX(90deg) rotateX(-0deg) rotateZ(-0deg);
    }
    100% {
        transform: translateY(50px) perspective(1920px) translateX(-120px) translateZ(-150px) rotateX(90deg) rotateX(-360deg) rotateZ(-360deg);
    }
}
@keyframes rotate-bottom-1 {
    0% {
        transform: translateY(50px) perspective(1920px) translateX(-120px) translateZ(-150px) rotateX(-90deg) rotateX(-0deg) rotateZ(-0deg);
    }
    100% {
        transform: translateY(50px) perspective(1920px) translateX(-120px) translateZ(-150px) rotateX(-90deg) rotateX(-360deg) rotateZ(360deg);
    }
}
@keyframes rotate-left-1 {
    0% {
        transform: translateX(-30px) perspective(1920px) translateX(-120px) translateZ(-150px) rotateY(-90deg) rotateZ(0deg) rotateY(0deg);
    }
    100% {
        transform: translateX(-30px) perspective(1920px) translateX(-120px) translateZ(-150px) rotateY(-90deg) rotateZ(360deg) rotateY(360deg);
    }
}
@keyframes rotate-right-1 {
    0% {
        transform: translateX(-30px) perspective(1920px) translateX(-120px) translateZ(-150px) rotateY(90deg) rotateZ(0deg) rotateY(0deg);
    }
    100% {
        transform: translateX(-30px) perspective(1920px) translateX(-120px) translateZ(-150px) rotateY(90deg) rotateZ(-360deg) rotateY(360deg);
    }
}
@keyframes rotate-front-2 {
    0% {
        transform: perspective(1920px) translateX(120px) translateZ(-150px) rotateX(-0deg) rotateY(0deg);
    }
    100% {
        transform: perspective(1920px) translateX(120px) translateZ(-150px) rotateX(-360deg) rotateY(360deg);
    }
}
@keyframes rotate-back-2 {
    0% {
        transform: perspective(1920px) translateX(120px) translateZ(-150px) rotateX(180deg) rotateX(-0deg) rotateY(0deg);
    }
    100% {
        transform: perspective(1920px) translateX(120px) translateZ(-150px) rotateX(180deg) rotateX(-360deg) rotateY(-360deg);
    }
}
@keyframes rotate-top-2 {
    0% {
        transform: translateY(50px) perspective(1920px) translateX(120px) translateZ(-150px) rotateX(90deg) rotateX(-0deg) rotateZ(-0deg);
    }
    100% {
        transform: translateY(50px) perspective(1920px) translateX(120px) translateZ(-150px) rotateX(90deg) rotateX(-360deg) rotateZ(-360deg);
    }
}
@keyframes rotate-bottom-2 {
    0% {
        transform: translateY(50px) perspective(1920px) translateX(120px) translateZ(-150px) rotateX(-90deg) rotateX(-0deg) rotateZ(-0deg);
    }
    100% {
        transform: translateY(50px) perspective(1920px) translateX(120px) translateZ(-150px) rotateX(-90deg) rotateX(-360deg) rotateZ(360deg);
    }
}
@keyframes rotate-left-2 {
    0% {
        transform: translateX(-30px) perspective(1920px) translateX(120px) translateZ(-150px) rotateY(-90deg) rotateZ(0deg) rotateY(0deg);
    }
    100% {
        transform: translateX(-30px) perspective(1920px) translateX(120px) translateZ(-150px) rotateY(-90deg) rotateZ(360deg) rotateY(360deg);
    }
}
@keyframes rotate-right-2 {
    0% {
        transform: translateX(-30px) perspective(1920px) translateX(120px) translateZ(-150px) rotateY(90deg) rotateZ(0deg) rotateY(0deg);
    }
    100% {
        transform: translateX(-30px) perspective(1920px) translateX(120px) translateZ(-150px) rotateY(90deg) rotateZ(-360deg) rotateY(360deg);
    }
}
@keyframes rotate-front-3 {
    0% {
        transform: perspective(1920px) translateX(360px) translateZ(-150px) rotateX(-0deg) rotateY(0deg);
    }
    100% {
        transform: perspective(1920px) translateX(360px) translateZ(-150px) rotateX(-360deg) rotateY(360deg);
    }
}
@keyframes rotate-back-3 {
    0% {
        transform: perspective(1920px) translateX(360px) translateZ(-150px) rotateX(180deg) rotateX(-0deg) rotateY(0deg);
    }
    100% {
        transform: perspective(1920px) translateX(360px) translateZ(-150px) rotateX(180deg) rotateX(-360deg) rotateY(-360deg);
    }
}
@keyframes rotate-top-3 {
    0% {
        transform: translateY(50px) perspective(1920px) translateX(360px) translateZ(-150px) rotateX(90deg) rotateX(-0deg) rotateZ(-0deg);
    }
    100% {
        transform: translateY(50px) perspective(1920px) translateX(360px) translateZ(-150px) rotateX(90deg) rotateX(-360deg) rotateZ(-360deg);
    }
}
@keyframes rotate-bottom-3 {
    0% {
        transform: translateY(50px) perspective(1920px) translateX(360px) translateZ(-150px) rotateX(-90deg) rotateX(-0deg) rotateZ(-0deg);
    }
    100% {
        transform: translateY(50px) perspective(1920px) translateX(360px) translateZ(-150px) rotateX(-90deg) rotateX(-360deg) rotateZ(360deg);
    }
}
@keyframes rotate-left-3 {
    0% {
        transform: translateX(-30px) perspective(1920px) translateX(360px) translateZ(-150px) rotateY(-90deg) rotateZ(0deg) rotateY(0deg);
    }
    100% {
        transform: translateX(-30px) perspective(1920px) translateX(360px) translateZ(-150px) rotateY(-90deg) rotateZ(360deg) rotateY(360deg);
    }
}
@keyframes rotate-right-3 {
    0% {
        transform: translateX(-30px) perspective(1920px) translateX(360px) translateZ(-150px) rotateY(90deg) rotateZ(0deg) rotateY(0deg);
    }
    100% {
        transform: translateX(-30px) perspective(1920px) translateX(360px) translateZ(-150px) rotateY(90deg) rotateZ(-360deg) rotateY(360deg);
    }
}
like image 3
ndm Avatar answered Nov 04 '22 01:11

ndm
Sign in to Comment

Related questions

My element or background isn't displaying in Chrome but displays in all other browsers, why?
TextArea element - default size to fit content
page background image transition on scroll via css3/javascript
Break out of position:relative *without* changing structure
How to set a floating div at the bottom left of my content?
Font size unusually changes
CSS Height 100% + overflow: auto not showing all of nest content
White Flash on First Page Load: Can this be "fixed?" [closed]
Stop wide image from producing horizontal scrollbar
Add a Border Radius to <video> tag in Chrome
Table with white-space: nowrap and one column needs overflow: hidden
Can't align <div> to center
Trouble with @font-face and .ttf file
How to add class to Form in Yii framework?
Sizing Leaflet Map inside bootstrap
Multiple select options are not taking the full width of the box on Internet Explorer 9
Word-wrap doesn't apply to div inside fieldset in chrome
How to get the "text-justify:kashida" css property effect on to the arabic text excluding IE browsers
weird float clear issue
Trying to make a custom table [closed]

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!