» »

Зеркальное отображение изображения CSS3


Зеркальное отображение изображения CSS3

Если хорошо познать CSS3 то можно свой сайт сильно преобразить, к примеру этого скрипта Зеркальное отображение изображения CSS3 где вы сделаете вид реально неповторимый и безусловно оригинальный от других. Просто, нужно применить стили и код к ресурсу и ваши картинки приобретут совершенно другой вид в плане визуализации и как то станет интересней.
Код
img {
  -moz-transform: scaleY(-1);
  -o-transform: scaleY(-1);
-webkit-transform: scaleY(-1);
  transform: scaleY(-1);
  filter: FlipV;
  -ms-filter: "FlipV";
}


Не забудем, что эффект будет видно, лишь в тех браузерах, которые поддерживают свойство CSS3 transform.

Результат:

Было:


Стало:


С помощью этого правила можно придумать html консрукцию, которая используя одно и то же изображение, будет имитировать эффект мокрого пола.
Ну и также можно переориентировать отражение по горизонтали:
Код
img {
  -moz-transform: scaleX(-1);
  -o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
  transform: scaleX(-1);
  filter: FlipH;
  -ms-filter: "FlipH";
}
06.10.2015 Просмотров: 654 Комментарий: (11)

Поделиться в социальных сетях

Материал разместил
kos

Комментарий: 11
Brung
Brung 06.10.2015 00:461
+1
Что то не заметил разницу, она видна только когда установишь, хотя как слайдер мне нравиться.
AnTron
AnTron 06.10.2015 00:532
+2
Скрипт красивый, здесь бы DEMO не помешало. Просто на такой материал, всегда предоставляют его, чтоб посмотреть как работает и взгляд с натуры был.
Kosten
Kosten 06.10.2015 01:023
0
AnTron, слайдеры почти все очень оригинально и красиво смориться, но правильно сказано, нужна визуализация натуры, на картинке одно а в реале совершенно другое можно увидеть по мелочам.
AnTron
AnTron 06.10.2015 02:284
0
Что то пошли одни слайдеры.
Brung
Brung 06.10.2015 02:295
0
AnTron, точнее сказать, все что связано с изображением, это слайдеры и эффекты на изображение.
Kosten
Kosten 06.10.2015 02:346
0
А что слайдеры и эффекты на картинки уже не скрипты. Если так интересно, то скажу. Просто одно время Модератор DALMATIN, плотно работал с ними и накопилось много. А это адаптировал под систему uCoz и он все проверял на работоспособность, что на некоторых показываю демо, вот и заливаю рабочий материал, которого думаю нет не у кого пока.
Brung
Brung 06.10.2015 02:357
0
Вот в чем секрет.
AnTron
AnTron 06.10.2015 02:368
0
Это хорошо когда точно знаете что работает и есть где посмотреть. Но как понимаю, этот не его работа.
Kosten
Kosten 06.10.2015 02:399
0
AnTron, нет это не его работа. Но это не о чем не говорит, что он не рабочий.
avatar
RRetail_Corp 27.11.2015 17:5110
0
У меня он просто картинку перевернул и все.
Kosten
Kosten 27.11.2015 19:5911
0
Рабочий код, если его адаптировал Модератор Димон, здесь точно не скажешь, влзможно вы что то неправильно делаете.
avatar