Для відображення зображення або іншого елемента, у тому числі тексту, застосовується властивість transform та функція scale() . Хоча ця функція призначена для зміни масштабу елемента, негативне значення-1 дозволяє зробити відображення.
Варіанти такі:
- transform: scale(-1, 1) — відображення по горизонталі;
- transform: scale(1,-1) — відображення по вертикалі;
- transform: scale(-1,-1) (або просто scale(-1)) — одночасне відображення по горизонталі та вертикалі.
Замість scale() можна використовувати окремі функції scaleX() і scaleY(), вони відповідають за масштабування за відповідними координатами:
- transform: scaleX (-1) — відображення по горизонталі;
- transform: scaleY(-1) — відображення по вертикалі;
- transform: scaleX(-1) scaleY(-1) — одночасне відображення по горизонталі та вертикалі.
У прикладі 1 додається звичайне зображення, а потім воно ж але відбите по вертикалі. Для цього до <img> додається клас з ім'ям mirrorY, а в ньому використовується властивість transform з функцією scaleY(-1).
Приклад 1. Відображення фотографії
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Відображення</title> <style> .mirrorY { transform: scaleY(-1); }
</style>
</head>
<body> <img src="image/spam.jpg" alt="Спам"> <img src="image/spam.jpg" alt="Спам" class="mirrorY">
</body>
</html>Результат цього прикладу показаний на рис. 1.
Мал. 1. Звичайна фотографія та фотографія, відбита по вертикалі