CSS-3 transforms mangle HTML element when I add another sibling element

Question

3 and basically just trying to understand how the CSS3 properties perspective and transform-style:preserve-3d really work, so I made the following two demos:

DEMO ONE:

HTML:

<div class="wrapper">
    <div class="inner"></div>
</div>

CSS:

.wrapper {
    perspective:1000px;
    transform-style: preserve-3d;
}
.inner {
    margin: 200px 0 0 200px;
    height: 400px;
    width: 400px;
    background: #444;
    transform : translateX(-350px) translateZ(-200px) rotateY(45deg);
}

In the first demo all the transform properties behave just as I want them to, I wanted the div to move left and then move on the z-offset backward and then rotate 45degs. That's exactly what I wanted, now the problem arises when I add another inner div to the HTML. See below:

DEMO TWO

HTML:

<div class="wrapper">
    <div class="inner"></div>
    <div class="inner"></div>
</div>

CSS:

.wrapper {
    perspective:1000px;
    transform-style: preserve-3d;
}
.inner {
    margin: 200px 0 0 200px;
    height: 400px;
    width: 400px;
    background: #444;
    transform : translateX(-350px) translateZ(-200px) rotateY(45deg);
}

Suddenly my transforms get mangled. Why is this happening?

Answer 1

When you apply perspective, it is important where are you applying it.

There is a point where you are looking at and this point determines hows the scene is rendered.

By default, it is at the center of the element. And your element is here:

.wrapper {
    perspective:1000px;
    transform-style: preserve-3d;
    border: solid 1px red;
}
.inner {
    margin: 200px 0 0 200px;
    height: 400px;
    width: 400px;
    background: #444;
    transform : translateX(-350px) translateZ(-200px) rotateY(45deg);
}

<div class="wrapper">
    <div class="inner"></div>
</div>

And here

.wrapper {
    perspective:1000px;
    transform-style: preserve-3d;
    border: solid 1px red;
}
.inner {
    margin: 200px 0 0 200px;
    height: 400px;
    width: 400px;
    background: #444;
    transform : translateX(-350px) translateZ(-200px) rotateY(45deg);
}

<div class="wrapper">
    <div class="inner"></div>
    <div class="inner"></div>
</div>

See how the wrapper is bigger and so the perspective center is lower.

And now see you second example, with the same perspective than the first one, applied by hand

.wrapper {
    perspective:1000px;
    transform-style: preserve-3d;
    border: solid 1px red;
    perspective-origin: center 300px;
}
.inner {
    margin: 200px 0 0 200px;
    height: 400px;
    width: 400px;
    background: #444;
    transform : translateX(-350px) translateZ(-200px) rotateY(45deg);
}

<div class="wrapper">
    <div class="inner"></div>
    <div class="inner"></div>
</div>