Почему преобразование-origin-z искажается на Safari, iOS?

Я создаю эффект вращения призмы, используя 3D-преобразования. Свойство transform-origin-z казалось лучше всего для преобразования лиц призмы, но Safari 5 и Mobile Safari необъяснимо растягивают мой элемент, даже если не применяется преобразование. Firefox 12 и Chrome 18 работают правильно.

Live Demo

Демо-версия полной призмы

Мне интересно понять, почему это происходит. Должен ли я полностью избегать transform-origin-z, или есть ли какое-то обходное решение для Safari и Mobile Safari?

<style>
  /* other browser prefixes omitted for brevity */
  .container {
    margin: 50px;
    border: 2px solid #00f;
    height: 50px;
    -webkit-perspective: 500px;
  }
  .face {
    height: 50px;
    background-color: rgba(255,0,0,0.5);
    -webkit-transform-origin: center center -25px;
    -webkit-transform: translate3d(0,0,0);
  }
</style>

<div class="container">
  <div class="face"></div>
</div>

Ответ 1

похоже, что это ошибка в Safari. Chrome перемещает центр трансформации по оси Z, Safari покидает этот центр, если он был, но сам перемещает объект по оси Z. Поэтому объект масштабируется в Safari и выглядит больше.

Я бы предпочел бы начало трансформации (по оси Z) и работать с translate-Z, чтобы получить тот же эффект.

Пример:

http://jsfiddle.net/willemvb/GuhcC/3/

Ответ 2

Я полагаю, что следующее объяснение отвечает "почему" Safari делает то, что он

У меня нет доступа к Safari для тестирования, но когда я прочитал спецификации для свойства perspective (на той же странице спецификации, на которую вы указываете), он утверждает:

Свойство "перспективы" применяет то же преобразование, что и view(), за исключением того, что он применяется только к расположенным или преобразованным детям элемента, а не к преобразовать сам элемент.

Обновить, как я прочитал выше спецификацию

Свойство "перспективы" применяет то же преобразование, что и функция преобразования перспективы()

Это говорит мне, что перспективное преобразование будет сделано так, как если бы в этом случае были применены transform: perspective(500px).

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

Это говорит мне, что перспективное преобразование будет применяться к дочерним элементам, в данном случае .face. Здесь, кажется, есть какая-то двусмысленность. Говорит ли это, что перспектива должна применяться только в том случае, если для дочернего элемента выполняется другое преобразование? И свойство tranform-origin считается преобразованием, выполняемым для дочернего элемента (тем более, что это значение напрямую связано с преобразованием perspective)? В этой точке двусмысленности браузеры, похоже, отличаются друг от друга. Safari выполняет преобразование perspective, потому что дочерний элемент имеет tranform-origin, установленный в -25px, тогда как другие, по-видимому, не являются (по крайней мере, пока фактический другой transform не сделает что-то еще в .face во время анимация).

не к преобразованию самого элемента

Это говорит мне, что z=0 of .container не имеет значения, потому что преобразование из этого свойства не влияет на .container, а скорее на .container детей (т.е. .face).

Итак, Safari, похоже, занимает позицию, что ваш .face всегда имеет преобразование, потому что вы установили .container как -webkit-perspective: 500px;, поэтому всегда применяется преобразование perspective к дочерним элементам (.face в вашем случае).

Обратите внимание, что если вы уберете анимацию и примените фактический transform: perspective(500px) к .face, вы увидите тот же результат в Firefox или Chrome, как ваш опыт в Safari с вашим кодом.

Итак, я думаю, что Safari, возможно, делает это правильно, а Firefox и Chrome, возможно, не являются. Спецификация имеет некоторую двусмысленность. Другие два браузера, возможно, должны по-прежнему применять преобразование перспективы, основанное на .container, как это делает Safari, но, разумеется, не должно быть, в то время как Safari, очевидно, похоже.

Чтобы устранить проблему (не "торчать" при "отдыхе" ), вам, вероятно, нужно

Анимируйте сам transform-origin в начале вашей анимации (и reset до 0), OR...
Анимируйте значение perspective как 0, когда "в состоянии покоя" и 500px при анимации.

Мое предположение # 1 будет проще реализовать, но я точно не знаю.

Ответ 3

Я не знаю, почему это сработало для меня. Казалось бы работать со всеми браузерами. В основном, я думаю, что я отменю эффект объявления css.

.container {
   perspective: 500px;
   transform-origin: 50% 50% 25px;
}