Шкала <meter> всегда располагается горизонтально. В целях дизайна её можно расположить вертикально, для чего применяется трансформация через стилевое свойство transform с функцией rotate() или rotateZ(). В качестве значения ставим 90 градусов против часовой стрелки (-90deg), чтобы заполненная полоса оказалась снизу (пример 1).
Пример 1. Использование функции rotateZ()
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>meter</title>
<style>
meter {
transform: rotateZ(-90deg); /* Поворачиваем элемент */
}
</style>
</head>
<body>
<meter min="0" max="100" value="20"></meter>
<meter min="0" max="100" value="60"></meter>
<meter min="0" max="100" value="80"></meter>
<meter min="0" max="100" value="100"></meter>
</body>
</html>
Поскольку поворот шкалы происходит вокруг центральной точки, то часть элемента может оказаться за пределами видимой области браузера. Для компенсации этого явления <meter> следует немного сдвинуть через функцию translate(), а также сблизить элементы между собой с помощью отрицательного значения margin-right (пример 2).
Пример 2. Смещение элементов
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>meter</title>
<style>
meter {
transform: rotateZ(-90deg) translate(-50%, -50%); /* Поворачиваем и сдвигаем */
margin-right: -40px; /* Сдвигаем влево */
}
</style>
</head>
<body>
<meter min="0" max="100" value="20"></meter>
<meter min="0" max="100" value="60"></meter>
<meter min="0" max="100" value="80"></meter>
<meter min="0" max="100" value="100"></meter>
</body>
</html>
Не обязательно разворачивать именно на 90 градусов, при желании можно поставить и другой угол, к примеру, 60 градусов, как показано в примере 3.
Пример 3. Наклон шкалы под углом
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>meter</title>
<style>
meter {
transform: rotateZ(-60deg) translateX(-50%);
margin-right: -40px;
}
</style>
</head>
<body>
<meter min="0" max="100" value="20"></meter>
<meter min="0" max="100" value="60"></meter>
<meter min="0" max="100" value="80"></meter>
<meter min="0" max="100" value="100"></meter>
</body>
</html>
Итоги
- Для вертикальной ориентации элемента <meter> применяется стилевое свойство transform с функцией rotateZ().
- При вращении элемент смещается со своей исходной позиции и чтобы его сдвинуть используется функция translate().
- При размещении нескольких <meter> рядом друг с другом между ними возникают промежутки, которые можно компенсировать с помощью свойства margin-right с отрицательным значением.
Перейти к заданиям
Автор: Влад Мержевич
Последнее изменение: 26.10.2023