Я создаю эффект вращения призмы, используя 3D-преобразования. Свойство transform-origin-z казалось лучше всего для преобразования лиц призмы, но Safari 5 и Mobile Safari необъяснимо растягивают мой элемент, даже если не применяется преобразование. Firefox 12 и Chrome 18 работают правильно.
Мне интересно понять, почему это происходит. Должен ли я полностью избегать 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>
похоже, что это ошибка в Safari. Chrome перемещает центр трансформации по оси Z, Safari покидает этот центр, если он был, но сам перемещает объект по оси Z. Поэтому объект масштабируется в Safari и выглядит больше.
Я бы предпочел бы начало трансформации (по оси Z) и работать с translate-Z, чтобы получить тот же эффект.
Пример:
Я полагаю, что следующее объяснение отвечает "почему" 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 будет проще реализовать, но я точно не знаю.
Я не знаю, почему это сработало для меня. Казалось бы работать со всеми браузерами. В основном, я думаю, что я отменю эффект объявления css.
.container {
perspective: 500px;
transform-origin: 50% 50% 25px;
}