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

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

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

AABBCC      CCBBAA
AABBCC  ->  CCBBAA

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

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

72
css image-manipulation javascript

4 ответов

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

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

3

просто выкопал этот ответ, пытаясь исправить ошибку, в то время как предлагаемый ответ правильный, я обнаружил, что он нарушает большинство современных правил CSS-линтинга относительно включения всех правил поставщика для преобразования. Однако включение правила-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;
}
2

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