вырезать DIV в HTML без элемента canvas

Question

Я работаю над эффектом переворота HTML + Javascript Page.Я хочу, чтобы это было выполнено без элемента HTML5 Canvas, чтобы я мог использовать это с текстом / формами и т. Д.

Это то, что я до сих пор собирал вместе (браузеры webkit, я использую Chrome 12): JSFIDDLE: перелистывание страниц

Предварительный просмотр:

Я хочу не показывать области красного прямоугольника за пределами синего прямоугольника,Моя проблема заключается в маскировке / обрезании перекрывающейся области (фиолетовой области).Я пытался вставить страничный (красный) div в маску (синий) div и установить overflow : hidden, но проблема заключалась в том, что всякий раз, когда маска (синяя) вращалась, страница (красная) тоже вращалась, и вычисления не приводили к исправлениюсо смещением.

Есть ли другие способы обрезать этот регион?

Answer 1

Вы должны рассчитать и реализовать счетчик поворота для внутреннего div, чтобы сместить вращение внешнего / маскирующего div. Вот пример из наших демоверсий Sencha Animator :

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

Answer 2

Если я правильно понимаю вопрос, вы хотите, чтобы (синий) div был выше (красного) div?Если это так, тогда добавьте свойство z-index к обоим и получите (синий) div z-index выше, чем у (красного) div.

Обновление: Это может стоитьзаглядывая в свойство CSS clip, потому что ваш (красный) div уже позиционирован абсолютно.Тогда единственная проблема заключается в том, что ваш (красный) div должен быть внутри (голубого) div.