В чем разница между перспективой и преобразованием перспективных свойств в CSS?

В нашем приложении мы используем временное преобразование css как переход на страницу.

С последней версией google chrome (37) это перестало работать. Трансформация уже не имеет перспективы.

С помощью инструментов разработчика я смог восстановить правильное поведение, изменив определение перспективы на родительский элемент из

perspective: 2000px;

transform: perspective(2000px);

Мой вопрос: что-то не так с нашей существующей декларацией (с использованием свойства perspectice), или это ошибка в google chrome?

Я попытался воссоздать проблему ниже, но в приведенном примере я вижу обратный эффект, что теперь перспектива работает и преобразуется: перспектива не.

Любые мысли?

.perspective-Parent {
    /*-moz-transform: perspective(2000px);
    -ms-transform: perspective(2000px);
    -o-transform: perspective(2000px);
    -webkit-transform: perspective(2000px);
    transform: perspective(2000px);*/
  
    -moz-perspective: 2000px;
    -ms-perspective: 2000px;
    -webkit-perspective: 2000px;
    perspective: 2000px; 
  
    -moz-perspective-origin: 50% 50%;
    -ms-perspective-origin: 50% 50%;
    -webkit-perspective-origin: 50% 50%;
    perspective-origin: 50% 50%; 
 }

.page {
  	background-color: red;
    
  	-moz-transform-origin: right center;
  	-ms-transform-origin: right center;
  	-o-transform-origin: right center;
	-webkit-transform-origin: right center;
  	transform-origin: right center;
  	
  	-ms-transform: rotateY(75deg);
  	-moz-transform: rotateY(75deg);
  	-o-transform: rotateY(75deg);
  	-webkit-transform: rotateY(75deg);
    transform: rotateY(75deg);
  
    width: 200px;
    height: 100px;
}

<p>
<div class="perspective-Parent">
  <div class="page">
  </div>
</div>

Ответы

Ответ 1

Мое основное понимание перспективы перспективы и перспективы просто заключается в том, что атрибут простой перспективы - это то, что вы обычно используете в родительском элементе, чтобы предоставить нескольким дочерним пользователям одну и ту же перспективу, тогда как перспектива преобразования будет использоваться для дочернего элемента или отдельного элемента для дать ему свою собственную перспективу.

Это наиболее легко увидеть, когда вы применяете эти эффекты к нескольким элементам:

perspective: ; в родительском элементе:

.perspective-Parent {
  -moz-perspective: 2000px;
  -ms-perspective: 2000px;
  -webkit-perspective: 2000px;
  perspective: 2000px;
  -moz-perspective-origin: 50% 50%;
  -ms-perspective-origin: 50% 50%;
  -webkit-perspective-origin: 50% 50%;
  perspective-origin: 50% 50%;
}
.page {
  background-color: red;
  -moz-transform-origin: right center;
  -ms-transform-origin: right center;
  -o-transform-origin: right center;
  -webkit-transform-origin: right center;
  transform-origin: right center;
  -ms-transform: rotateY(75deg);
  -moz-transform: rotateY(75deg);
  -o-transform: rotateY(75deg);
  -webkit-transform: rotateY(75deg);
  transform: rotateY(75deg);
  width: 200px;
  height: 100px;
  margin: 10px; /* added to make difference more visible */ 
}

<div class="perspective-Parent">
  <div class="page"></div>
  <div class="page"></div>
  <div class="page"></div>
</div>

Ответ 2

Принятый ответ здесь неверен.

Вы действительно можете преобразовать перспективу в родительский элемент. Для этого вам нужно установить transform-style: preserve-3d; на родительском.

.perspective-Parent{
  transform: perspective(2000px);
  transform-style: preserve-3d;
}

.page {
  background-color: red;
  transform-origin: right center;
  transform: rotateY(75deg);
  width: 200px;
  height: 100px;
  margin: 10px;
}

<div class="perspective-Parent">
<div class="page">
</div>
<div class="page">
</div><div class="page">
</div>
</div>

Ответ 3

Чтобы активировать 3D-пространство, элемент нуждается в перспективе. Это можно применить двумя способами: с использованием свойства transform, с перспективой в качестве функциональной нотации.

transform: perspective( 600px );

или используя свойство перспективы:

perspective: 600px;

Перспективная проекция против Перспективной трансформации

Перспективная проекция вычисляет перспективный вид (т.е. ракурс) трехмерного объекта на двумерную плоскость проекции. Эффект обзора в перспективе, и, конечно, значения z (информация о глубине) отбрасываются в процессе.

Перспективная трансформация позволяет нам увидеть, как наперед обозреваемые и проецируемые полигоны будут перекрываться, не отбрасывая z-значения (которые мы должны использовать позже для сравнения глубины).

Ответ 4

Порядок имеет значение при объявлении свойства и функции, функция "перспективы" должна появляться сразу после свойства "transform"!

НЕПРАВИЛЬНЫЙ КОД

transform:rotateX(45deg) perspective(100px);

CORRECT CODE

transform:perspective(100px) rotate(45deg);