How to Recreate Perspective-Origin Effect by Transforming Child Elements

  • Home
  • Languages
  • CSS
  • How to Recreate Perspective-Origin Effect by Transforming Child Elements

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

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

Is it possible to set perspective-origin on elements that are transformed with transform: perspective()?

It appears that with perspective set via transition, transition-origin plays the role of perspective-origin.

translate3d() & rotateY() working, but perspective-origin not working... why?

The order in the transform functions is important

They are applied from right to left, so this

transform:  translate3d(0px,0px,0px) rotateY(45deg) perspective(100px);

applies the perspective when the element isn't rotated, so it doesn't show.

It should be

transform:  perspective(100px) translate3d(0px,-50px,0px) rotateY(45deg);

first rotate, then translate and then apply the perspective

fiddle

This applies the perspective (or, better say, the perspective applied is noticeable). But since it applies it to the translated element, it is not centered.

If you want it centered, apply the perspective before the translatiion. Notice that the transform is evaluated right to left, so before means afterwards in the list

transform: translate3d(0px,-50px,0px) perspective(600px) rotateY(80deg);

Notice that perspective-origin is useless when applying perspective as a function instead of a property.

fiddle

3d transform IE10

Note that the -ms- prefix is deprecated, it was supposed to be used only in the release preview, as of the final IE10 the unprefixed properties are supported, which will overwrite the prefixed ones!

That being said, you'll have to change the position of the individual faces instead of rotating the container.

I found the easiest is to shift the faces transform origin into the center, that way you only have to rotate the faces to get the animation running.

Here's a bare to the bones example based on your code: http://jsfiddle.net/k1m045uu/

<!DOCTYPE html>
<html>
    <head>
        <style type='text/css'>
        #Carousel {
            display: block;
            margin:100px auto 20px auto;
        }

        #Spinner {
            position: relative;
            margin: 0 auto;
            height: 350px;
            width: 500px;
        }

        #Carousel .face {
            position: absolute;
            height: 350px;
            width: 500px;
            transform-origin: 50% 50% -250px;
            transition: all 1.0s ease-in-out;
        }
        #Carousel img {
            width: 500px;
            box-shadow: 0 0 0 1px #000;
        }

        #Spinner .f0 {
            transform: perspective(1000px) rotateY(0deg) translateZ(95px);
        }
        #Spinner .f1 {
            transform: perspective(1000px) rotateY(72deg) translateZ(95px);
        }
        #Spinner .f2 {
            transform: perspective(1000px) rotateY(144deg) translateZ(95px);
        }
        #Spinner .f3 {
            transform: perspective(1000px) rotateY(216deg) translateZ(95px);
        }
        #Spinner .f4 {
            transform: perspective(1000px) rotateY(288deg) translateZ(95px);
        }
        </style>

        <script src='http://code.jquery.com/jquery-1.11.1.min.js'></script>
    </head>
    <body>
        <div id="Carousel">
            <a href=# onclick="rotate(-72);">Previous</a> <a href=# onclick="rotate(+72);">Next</a>
            <div id="Spinner">
                <img class="face f0" src="img/test1.jpg" />
                <img class="face f1" src="img/test2.jpg" />
                <img class="face f2" src="img/test3.jpg" />
                <img class="face f3" src="img/test4.jpg" />
                <img class="face f4" src="img/test5.jpg" />
            </div>
        </div>

        <script>
        var elements = $('.face');
        var rotates = [0, 72, 144, 216, 288];

        function rotate(deg)
        {
            elements.each(function(index)
            {
                rotates[index] = rotates[index] + deg;
                $(this).css('transform', 'perspective(1000px) rotateY(' + rotates[index] + 'deg) translateZ(95px)');
            });
        }
        </script>
    </body>
</html>

See also How to recreate perspective-origin effect by transforming child elements? for some more info regarding perspective origin and a further example.

Why is backface-visibility hidden not working in IE10 when perspective is applied to parent elements?

I came up against this glitch too and it is definitely a glitch.

The workaround is to apply the perspective transform on the child element. I updated your fiddle here: http://jsfiddle.net/jMe2c/

.item {
    backface-visibility: hidden;
    transform: perspective(200px) rotateX(0deg);
}
.container:hover .item {
    transform: perspective(200px) rotateX(180deg);
}

(See also answer at https://stackoverflow.com/a/14507332/2105930)

I think it is because in IE 10, parent element 3d-properties do not propagate to the child element. This is a known unsupported feature. Check out http://msdn.microsoft.com/en-us/library/ie/hh673529%28v=vs.85%29.aspx#the_ms_transform_style_property:

At this time, Internet Explorer 10 does not support the preserve-3d keyword. You can work around this by manually applying the parent element's transform to each of the child elements in addition to the child element's normal transform.

So the Microsoft-recommended solution is to propagate your 3d properties yourself, manually.

Why doesn't IE10 display nested CSS3 3D transformed elements?

IE10 Does not support:

transform-style: preserve-3d;

translateZ element still looks flat when rotating parent

I have done it with translate()

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">

<div class="snippet-code">

let gridElements = document.getElementsByClassName('grid-member');

var textContainer = document.querySelector("#text");

    let magify = (container, inner, adjust) => {

      // Mouse

      var mouse = {

        _x: 0,

        _y: 0,

        x: 0,

        y: 0,

        updatePosition: function (event) {

          var e = event || window.event;

          this.x = e.clientX - this._x;

          this.y = (e.clientY - this._y) * -1;

        },

        setOrigin: function (e) {

          this._x = e.offsetLeft + Math.floor(e.offsetWidth / 2);

          this._y = e.offsetTop + Math.floor(e.offsetHeight / 2);

        },

        show: function () {

          return '(' + this.x + ', ' + this.y + ')';

        },

      };

Related Topics

Styling Checkboxes, Radio Buttons and Dropdowns

Text Blurry After 3D Transform

How to Make CSS Animation to Play Every 10 Seconds

Using CSS3Pie Htc for Border-Radius in IE8

Redundant CSS Rules Ie Float & Display:Block

Why Shouldn't I Use Id Selectors in CSS

What Are the Difference Between Col-Lg and Col-Md in Bootstrap3

How to Display a List in Two Rows

How to Change the Border/Outline Color for Input and Textarea Elements in Twitter Bootstrap

3D Box Shadow Effect

CSS Media Type: How to Load CSS for Mobile

How to Add a CSS Stylesheet in Fxml

Two Divs Split with Diagonal Line - CSS

Concentric Circles with CSS

Compiling Issue in Bootstrap 3 with Namespace

Border-Image: Workaround for Ie

Css: Disable Font Ligatures in All Browsers

Change Body Bgcolor on Hovering a Div, Using CSS Only


Leave a reply



Submit