Как задать точку вращения для элемента в CSS?
Можно ли задать точку вращения в CSS? По умолчанию точка вращения находится на уровне 50%, 50%. Я пробовал использовать следующий код:
transform: rotate(230deg);
rotation-point: 90% 90%;
Но это не сработало... Есть ли какие-то предложения?
2 ответ(ов)
Чтобы установить точку вращения элемента в верхний левый угол и произвести вращение, используйте следующий код CSS:
transform: rotate(-25deg);
transform-origin: 0% 0%;
В этом случае свойство transform-origin устанавливает точку, относительно которой будет происходить вращение, а именно - в верхнем левом углу элемента.
Посмотрите на класс .nav_item_txt в вашем примере:
Таким образом, применяя указанный CSS код, вы сможете легко настроить вращение элемента по заданной точке.
Попробуйте использовать свойство transform-origin, вместо rotation-point, так как последнее не поддерживается.
Для вращения элемента вокруг верхнего правого угла (с учетом всех браузеров), используйте следующий код:
-webkit-transform-origin: 100% 0;
-moz-transform-origin: 100% 0;
-ms-transform-origin: 100% 0;
-o-transform-origin: 100% 0;
transform-origin: 100% 0;
Это задаст точку вращения для элемента в верхнем правом углу. Не забудьте также применить соответствующее свойство transform для выполнения самой анимации или преобразования.
Как применить несколько трансформаций в CSS?
Как расположить div внизу своего контейнера?
Медиа-запросы: Как нацелиться на десктоп, планшет и мобильные устройства?
Как сделать перенос строки с помощью CSS, не используя <br />?
Как адаптировать ширину flex-элемента к содержимому?