Кросс-браузерный способ перевернуть html/image через Javascript/CSS?

Есть ли библиотека/простой способ перевернуть изображение?

Переверните изображение следующим образом:

AABBCC      CCBBAA
AABBCC  ->  CCBBAA

Я не ищу анимацию, просто переверните изображение.

Я не искал поисковую систему и нашел сложную версию, которая использовала SVG на MozillaZine, который я не уверен, что это "Работаем кросс-браузер".

Ответ 1

Следующий 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;
}

Ответ 2

Посмотрите на одну из многочисленных библиотек типов reflection.js, они довольно просты. В IE они берут и используют фильтр "flipv", есть фильтр "fliph". Внутри других браузеров он создаст тэг canvas и использует drawImage. Хотя ответ Илии, вероятно, поддерживает те же браузеры.

Ответ 3

Просто выкопал этот ответ, пытаясь исправить ошибку, в то время как предлагаемый ответ правильный, я обнаружил, что он нарушает самые современные правила CSS Linting относительно включения всех правил поставщика для преобразования. Однако, в том числе правило -ms-tranform вызывает нечетную ошибку в IE9, где она применяет правила фильтра и -ms-transform, заставляя изображение переворачиваться и откидываться назад.

Вот мое рекомендуемое улучшение, которое также поддерживает правила CSS Lint:

.flip-horizontal {
    -moz-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -ms-transform: scaleX(1); /* linting rule fix + IE9 fix */
    transform: scaleX(-1);
    -ms-filter: fliph;
    filter: fliph;
}
.flip-vertical {
    -moz-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    -ms-transform: scaleY(1);  /* linting rule fix + IE9 fix */
    transform: scaleY(-1);
    -ms-filter: flipv;
    filter: flipv;
}

Ответ 4

Если вы хотите только перевернуть фоновое изображение, вы можете использовать класс для внутренних элементов внутри перевернутого 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>