CSS-3 transforms mangle HTML element when i add another sibling element . -

3 , trying understand how css3 properties perspective , transform-style:preserve-3d work , made following 2 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 1st demo tranform properties behave want them , wanted div move left , move on z-offset backward , rotate 45degs . thats wanted , problem arises when add inner div 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 transforms mangled , have no explanation or idea why happening ? can explain ?

thank you.

alex-z.

when apply perspective, important applying it.

there point looking at , point determines hows scene rendered.

by default, @ center of element. , element 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 wrapper bigger , perspective center lower.

and see second example, same perspective first one, applied 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>