Перекрестный браузер способ зеркально отразить HTML/изображение с помощью Javascript/CSS?
Это - действительно 6 из один, полдюжина из другой ситуации.
единственным возможным аргументом против Вашего подхода является $ _SERVER ['REQUEST_METHOD'] ==, 'POST' не может быть заполнен на определенных веб-серверах/конфигурации, тогда как $ _POST массив будет всегда существовать в PHP4/PHP5 (и если он не существует, у Вас есть большие проблемы (-:)
3 ответа
Следующий CSS будет работать в IE и современных браузерах, которые поддерживают преобразования CSS. Я добавил класс вертикального отражения на случай, если вы тоже захотите его использовать.
.flip-horizontal {
-moz-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
-o-transform: scaleX(-1);
transform: scaleX(-1);
-ms-filter: fliph; /*IE*/
filter: fliph;
}
.flip-vertical {
-moz-transform: scaleY(-1);
-webkit-transform: scaleY(-1);
-o-transform: scaleY(-1);
transform: scaleY(-1);
-ms-filter: flipv; /*IE*/
filter: flipv;
}
Взгляните на одну из многих библиотек типов Reflection.js , Они довольно простые. В IE берут и используют фильтр flipv, есть еще и фильтр fliph. Внутри других браузеров он создаст тег холста и использует метод drawImage. Хотя ответ Элайджи, вероятно, поддерживает те же браузеры.
Если вы хотите перевернуть только фоновое изображение, вы можете использовать класс для внутренних элементов внутри перевернутого div. По сути, вы переворачиваете внутренние элементы вместе с основным div, но переворачиваете каждый из них обратно. В любом случае, это работает в Firefox.
Вот так:
<div id="container" class="flip-horizontal"> <!-- container would have your background image -->
<h3 class="flip-horizontal">Hello There!</h3>
<p class="flip-horizontal">Here is some text</p>
</div>