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

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

72 голосов
/ 21 августа 2009

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

Отразить изображение так: 

AABBCC      CCBBAA
AABBCC  ->  CCBBAA

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

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

Ответы [ 4 ]

192 голосов
/ 21 августа 2009

Следующий 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;
}
3 голосов
/ 21 августа 2009

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

2 голосов
/ 12 марта 2014

Просто выкопайте этот ответ, пытаясь исправить ошибку, в то время как предлагаемый ответ правильный, я обнаружил, что он нарушает большинство современных правил 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;
}
0 голосов
/ 20 июля 2010

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