CSS-3 преобразует mangle HTML-элемент, когда я добавляю еще один элемент sibling.

Question

3 и в основном просто пытаются понять, каким образом свойства CSS3 perspective и transform-style:preserve-3d действительно работает, поэтому я сделал следующие две демки:

DEMO ONE:

HTML ::

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

CSS: : .wrapper { вид: 1000px; transform-style: preserve-3d; } .inner { margin: 200px 0 0 200px; высота: 400px; ширина: 400 пикселей; фон: # 444; transform: translateX (-350px) translateZ (-200px) rotateY (45deg); }

в 1-м демо все свойства tranform ведут себя так, как я их хочу, я хотел, чтобы div перемещался влево, а затем двигался на z-смещение назад, а затем поворачивал 45degs. вот именно то, что я хотел, теперь проблема возникает, когда я добавить еще inner DIV в HTML, смотрите ниже:

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

внезапно мои трансформации становятся искалеченными, и у меня нет объяснений или почему идея, почему это происходит? может кто-нибудь объяснить?

спасибо.

Alex-z.

Answer 1

Когда вы применяете перспективу, важно, где вы ее применяете.

Существует точка, в которой вы находитесь , глядя на, и этот пункт определяет, какова сцена рендеринга.

По умолчанию он находится в центре элемента. И ваш элемент здесь:

.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>

А вот

.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>

Смотрите, как обертка больше и поэтому в перспективе центр находится ниже.

А теперь увидится вторым примером, с тем же точкой зрения, чем первый, наносятся вручную

.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>