У меня есть следующий код: http://jsfiddle.net/RFMxG/1/
Когда переход выполняется, вы можете увидеть отступ около 20-30 пикселей с левой стороны. Несмотря на то, что я установил для свойства преобразования значение 0,0,0, оно по-прежнему неправильно вращается вокруг оси Y. Левый край синего прямоугольника должен быть на одном уровне с левым краем во время анимации.
Может ли кто-нибудь сказать мне, что я сделал неправильно?
Ладно, тут целая куча вопросов:
1) CSS-преобразования нельзя анимировать с помощью переходов. Если вы посмотрите на список переходных свойств W3C, вы заметите, что преобразование не не там.
2) -webkit-perspective влияет только на дочерние элементы элемента, к которому он применяется, а не на сам элемент. Прочитайте блог Safari по этому поводу:
Интересная особенность -webkit-perspective заключается в том, что она не влияет на элемент напрямую. Вместо этого он влияет на внешний вид 3D-преобразований преобразованных потомков этого элемента; вы можете думать об этом как о добавлении преобразования, которое умножается на преобразования потомков. Это позволяет всем потомкам видеть одну и ту же перспективу при перемещении.
3) Удивительно, что вы опубликовали скрипку, но, поскольку это проблема CSS, для дальнейшего использования было бы намного проще, если бы вы очистили весь javascript и использовали только один набор префиксов браузера. Помогите нам помочь вам!
4) Вероятно, вы захотите использовать анимацию. Вот сильно модифицированная версия вашей скрипки, которая работает при наведении:
5) Если вы умеете работать с javascript и вас вообще беспокоит совместимость с браузером (что, конечно же, так!), я настоятельно рекомендую делать такие анимации с помощью jstween.
Верно, так что решение на самом деле было связано с тем, что источник преобразования должен быть установлен до начала анимации (его нельзя установить одновременно с установкой свойства -webkit-transform).
Я обновил скрипку, чтобы продемонстрировать, что теперь она работает правильно. http://jsfiddle.net/RFMxG/5/
