сss (9) сss3 (14) ajax (2) css (42) drupal (7) Fix IE6 (4) font (4) html (23) javascript (22) jQuery (15) js (5) less (1) php (1) scss (1) soft (2) vue (1) webstorm (1) wordpress (1)

Зеркальное отражение фотографии (кроссбраузерность)

Зеркальное отражение фотографии методом СSS.
Свойство transform доступно в СSS3, на данный момент для кроссбраузерность записи для разных браузеров выглядят так:

.flip-horizontal {
    -moz-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    transform: scaleX(-1);
    -ms-filter: fliph; 
    filter: fliph; 
}
.flip-vertical {
    -moz-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    transform: scaleY(-1);
    -ms-filter: flipv;
    filter: flipv;
}

Свойство transform также разрешает менять размеры и крутить обекты по X, Y, Z осях, пример поворота объекта на 90 градусов:

div{
 transform:rotate(90deg);
 -ms-transform:rotate(90deg);
 -moz-transform:rotate(90deg); 
 -webkit-transform:rotate(90deg); 
 -o-transform:rotate(90deg); 
}