2013-08-14 7 views
2

Я пытаюсь сделать анимацию эффекта открытия двери. Есть ли какие-нибудь известные альгортимы для этого? Если нет, мне нужно изменить прямоугольник div, делающий правую сторону длиннее левой, а верхняя и нижняя линии, соединяющие правую и левую стороны div, будут диагональными, а содержимое div растянуто пропорционально. Есть ли способ изменить свойства высоты, например, для div?изменение высоты одной стороны div

+2

Используйте [CSS3 3D Transforms] (https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transforms)? – godfrzero

+1

Дверь открытия 3D-эффекта в CSS http://stackoverflow.com/a/8853933/1102223 Демо-версия: http://jsfiddle.net/aV76H/ – kubedan

ответ

0

Вы можете использовать свойство «преобразование» css, если вам не нужно поддерживать старые браузеры.

Посмотрите на w3c specification | mozilla dev, а также в этом руководстве: css 3d tutorial series.

Альтернативным решением для старых браузеров будет canvas, который более поддерживается (все еще не во всех браузерах).

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

0

Вы можете сделать это с помощью CSS Transform, но он не будет поддерживать старые браузеры. Вот хороший учебник для этого: http://24ways.org/2010/intro-to-css-3d-transforms/

Лучше всего сделать анимацию, используя несколько изображений и сменив их.

Смежные вопросы