Копировать вращение Flash Cube в CSS: сохранить правильную перспективу - PullRequest
0 голосов
/ 21 марта 2012

Я конвертирую Flash Web App в Javascript (HTML и CSS) Web App.У меня работает анимация вращения куба, но у меня проблема с перспективой.

Моя проблема: Я не уверен, какой атрибут CSS следует использовать для репликации перспективы версий Flash (см.2 изображения ниже).

2 изображения ниже, полученные во время вращения куба, и вы можете увидеть разницу в перспективе (2-е изображение слишком широкое и должно выглядеть как первое).Вы можете увидеть рабочий пример здесь (обратите внимание, что он работает только в Chrome или Safari): http://jsfiddle.net/CyyZx/6/

  • Первое изображение было взято из флэш-приложения и отображает ПРАВИЛЬНУЮ перспективу (которую я пытаюсьдостижения в CSS).

enter image description here

  • 2-е изображение взято из моего веб-приложения на CSS, Javascript и HTML, и куб вращается с перспективой НЕПРАВИЛЬНО.Какой атрибут CSS я могу изменить, чтобы получить вышеуказанную перспективу куба изображений?

enter image description here

Обратите внимание: Грани куба имеют точно такие жеРазмеры как флеш версия.В настоящее время я использую атрибуты CSS -webkit -спектива: 0;-webkit -спектива-происхождения: 0;

1 Ответ

1 голос
/ 21 марта 2012

На вашем .cubeContainer селекторе у вас есть -webkit-perspective: 0;, оно должно быть -webkit-perspective: 1000;.

Это установит перспективу «дальше назад» от экрана, где 0 устанавливает перспективу в значительной степени там, где находится экран.

http://jsfiddle.net/CyyZx/7/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...