| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 10 | 26 | 23 | 7.1 | 16 | 4 | ? |
Завдання
Віддзеркалити зображення по горизонталі або вертикалі.
Рішення
Для віддзеркалення зображення або іншого елемента, у тому числі текстовий, застосовується властивість transform і функція scale() з від'ємним значенням. Варіанти такі:
- transform: scale(-1, 1) — віддзеркення по горизонталі;
- transform: scale(1, -1) — віддзеркення по вертикалі;
- transform: scale(-1, -1) — одночасне віддзеркення по горизонталі і вертикалі.
Є також окремі функції scaleX() і scaleY(), вони відповідають за масштабування за відповідними координатами.
Хоча функція scale() призначена для зміни масштабу елемента, від'ємне значення також дозволяє зробити віддзеркалення. У прикладі 1 додається звичайне зображення, а потім воно ж, але відбите по вертикалі. Для цього до <img> додається клас з ім'ям mirrorY.
Приклад 1. Віддзеркалення фотографії
<!DOCTYPE html>
<HTML>
<head>
<meta charset= "utf-8">
<title>Віддзеркення </title>
<style>
.mirrorY{transform: scale(1, -1);}
</style>
</head>
<body>
<img src="images/spam.jpg" alt="Спам">
<img src="images/spam.jpg" alt="Спам" class="mirrorY">
</body>
</html>
Результат цього прикладу показано на рис. 1.
Рис. 1. Звичайна фотографія і малюнок, віддзеркалений по вертикалі