Как повернуть див на 90 градусов?
здравствуйте, подскажите, как мне повернуть див на 90 градусов ? При добавлении
» -webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
»
поворачивается только текст, но линия остаётся горизонтально, помогите решить проблему
https://codepen.io/Swift_u/pen/XwYQPP
- Вопрос задан более трёх лет назад
- 19792 просмотра
1 комментарий
Простой 1 комментарий
Ankhena @Ankhena Куратор тега CSS
здравствуйте, подскажите, как мне повернуть див на 90 градусов ? При добавлении
» -webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
«
Но я бы удивилась, если бы что-то повернулось на 90 градусов, если вы пишете 45
Поворот на 90 градусов текст
Здравстуйте, нужно повернуть текст на 90 градусов. Всё бы нечего, но помимо текста нужно развернуть ещё и блок (div), чтобы можно было обепрнуть его в бордер. В итоге должна получиться таблица:
Смотрю в атладчике IE — ширина и высота очень маленькие. Как можно расширить по длине текста каждый див, чтобф потмо можно было бы обернуть его в border?
Текст поворачиваю вот так:
1 2 3 4 5 6 7 8 9 10
.headerPermissions { display: inline-block; -moz-transform:rotate(-90deg); -webkit-transform:rotate(-90deg); -o-transform:rotate(-90deg); -ms-transform:rotate(-90deg); width: 21px; height: 42px; white-space: nowrap; }
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:
Странно работает поворот на 90 градусов
Поворот работает, но местоположение повёрнутого текста странное. Если брать одинаковый текст — всё.
Поворот фигуры на 90 градусов
Нужно чтобы при нажатии клавиши вправо или влево фигура поварачивалась на 90 градусов и двигалась.
Поворот матрицы на 90 градусов
в Memo записана квадратная матрица со стороной conlyns например 0 0 1 1 0 0 0 0 0 0 1 0 0 0 0 1.
Поворот матрицы m*n на 90 градусов
Всем привет! Народ, нужна ваша помощь. Для реализации задачи необходима функция поворота матрицы.
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
Помогаю со студенческими работами здесь
Поворот матрицы на 90 градусов
Всем привет. Столкнулся с проблемой в задаче по повороту матрицы на 90 градусов. Код работал с.
Поворот изображения на 90 градусов!
Как повернуть изображения Image на 90 градусов? Подскажите кому не трудно! За ранее спасибо!
Поворот матрицы на 90 градусов
uses crt; const l=100; var A:array of integer; i,j,p,x,k, n: integer; begin randomize;.
Поворот формы на 90 градусов
Здравствуйте!:) Столкнулся с такой проблемой, что при выводе формы на лист бумаги form.print форма.
Свойство transform
Задает масштаб элемента по оси X относительно его размеров. scaleX(2) увеличит элемент в два раза по ширине (ось X). Можно использовать отрицательные значения, тогда элемент будет отображаться зеркально по оси X и масштабироваться в таком виде
.example-2 transform: scaleY(2);
Задает масштаб элемента по оси Y относительно его размеров. scaleY(2) увеличит элемент в два раза по высоте (ось Y). Можно использовать отрицательные значения, тогда элемент будет отображаться зеркально по оси Y и масштабироваться в таком виде
.example-3 transform: scale(2);
Задает масштаб элемента по оси X и Y относительно его размеров. scale(2) увеличит элемент в два раза. Можно использовать отрицательные значения, тогда элемент будет отображаться зеркально по оси X и Y и масштабироваться в таком виде.
Можно задавать два параметра, каждой оси отдельно: scale(2, 2);
.example-4 transform: rotate(45deg);
Вращает элемент по оси Z. Доступные значения: deg 0-360deg, grad 0-400grad, turn 0-1turn. По умолчанию ось Z находится в центре элемента, данную позицию можно менять при помощи свойства transform-origin
.example-5 transform: rotateX(45deg);
Вращает элемент по оси X. Доступные значения: deg 0-360deg, grad 0-400grad, turn 0-1turn. По умолчанию ось X проходит по центру элемента, данную позицию можно менять при помощи свойства transform-origin
.example-6 transform: rotateY(45deg);
Вращает элемент по оси Y. Доступные значения: deg 0-360deg, grad 0-400grad, turn 0-1turn. По умолчанию ось Y проходит по центру элемента, данную позицию можно менять при помощи свойства transform-origin
.example-7 transform: rotateZ(45deg);
Вращает элемент по оси Z. Доступные значения: deg 0-360deg, grad 0-400grad, turn 0-1turn. По умолчанию ось Z находится в центре элемента, данную позицию можно менять при помощи свойства transform-origin
.example-8 transform: rotate3d(1, 1, 1, 45deg);
Вращает элемент в трехмерном пространстве. Первые три параметра — множители вращения для осей X, Y, Z, которые будут умножены на значение четвертого параметра.
rotate3d(1, 1, 1, 45deg); — вращает элемент по осям X, Y, Z на 45 градусов
rotate3d(0, 1, 1, 45deg); — Вращает элемент по осям Y, Z на 45 градусов
rotate3d(2, 1, 1, 45deg); — Вращает элемент по осям Y, Z на 45 градусов и по оси X на 90 градусов (45*2)
.example-88 transform: skewX(25deg);
Наклон элемента по оси X в градусах deg 0-360. Можно использовать отрицательные значения
.example-9 transform: skewY(25deg);
Наклон элемента по оси Y в градусах deg 0-360. Можно использовать отрицательные значения
.example-10 transform: skew(25deg, 25deg);
Наклон элемента по оси X, Y в градусах deg 0-360. Можно использовать отрицательные значения
.example-11 transform: translateX(10px);
Смещение элемента по оси X. Возможные единицы: px, em, rem, %, vh, vw. Можно использовать отрицательные значения
.example-12 < background: #d4ebf9; >.example-12-item transform: translateY(10px);
Смещение элемента по оси Y. Возможные единицы: px, em, rem, %, vh, vw. Можно использовать отрицательные значения
.example-13 < background: #d4ebf9; >.example-13-item transform: translate(25px, 50px);
Смещение элемента по оси X, Y. Возможные единицы: px, em, rem, %, vh, vw. Можно использовать отрицательные значения
.example-14 < background: #d4ebf9; >.example-14-item transform: translate3d(50px, 100px, 0);
Смещение элемента по оси X, Y, Z. Возможные единицы: px, em, rem, %, vh, vw. Можно использовать отрицательные значения
.example-15 < background: #d4ebf9; >.example-15-item
Обсуждение ( 0 )
Войдите или зарегистрируйтесь для того чтобы оставлять комментарии
CSS свойство transform
Свойство transform позволяет производить визуальные манипуляции с элементом, такие как поворот, масштабирование, смещение и вращение. Это может быть полезным для удержания внимания посетителей на различных фрагментах сайта. Анимированные блоки помогут улучшить навигацию на сайте, задержать внимание, и просто придадут свой уникальный стиль. Данные возможности появились в CSS3.
В качестве начало координат преобразования при изменении элементов используется свойство transform-origin .
Функция поддерживается большинством браузеров, в некоторых прежних версиях была реализована с префиксом -webkit-.
Синтаксис свойства CSS transform
transform: []* | none
Здесь – это желаемое действие над элементом, например, rotate (вращение). None – отменяет действие.
Функции transform
Трансформации бывают как 2d, так и 3d. Вторые являются расширением двухмерных функций. Сначала рассмотрим более актуальные 2d варианты.
Translate
Функция задает смещение по горизонтали и вертикали. Например, зададим смещение объект по горизонтали на 30px и по вертикали на 20px.
.element
Возникает вопрос, зачем нужна эта функция, которая повторяет уже существующие возможности CSS по сдвигу элемента, например position? Но каких-то разъяснений не нашел.
Величина смещения может быть задана в любых применяемых в CSS единицах, например px или em. Если задать только один параметр, тогда смещение будет только по горизонтали. Отрицательные значения сдвигают элемент в противоположную сторону.
Также есть две функции для смещения элемента только одной оси X или Y.
transform: translateX(value); transform: translateY(value);Scale
Растягивание (масштабирование) блока на плоскости. Масштаб задается по осям x и y – scale(x,y) . Если задано одно значение воздействие будет по двум осям сразу.
Создадим два блока с одинаковыми первоначальными размерами. Ко второму с красным прозрачным фоном применим transform: scale(2) .
На демонстрации элемент с красным фоном увеличился в 2 раза.
Для масштабирования по одной оси есть соответствующие функции scaleX и scaleY .
С помощью них можно зеркально отразить элемент.
- transform: scale(-1, 1) — отразить по горизонтали;
- transform: scale(1, -1) — отразить по вертикали;
- transform: scale(-1, -1) — одновременно перевернуть изображение по горизонтали и вертикали.
Rotate
Разворачивает элемент на плоскости. Например, transform: rotate(45deg) повернет объект на 45% по часовой стрелке.
Вы можете, например, повернуть текст на 90 градусов следующей инструкцией:
transform: rotate(90deg);deg обозначает градус поворота.
Scew
Наклоняет элемент влево или вправо, превращая прямоугольник в параллелограмм. skew() – это сокращение, которое объединяет skewX() и skewY(), принимая оба значения.
На примере ниже к синему квадрату применено transform:skew(20deg) (наклон только по горизонтали), а к красному функция transform:skew(20deg, 30deg) (наклон по обоим осям).
Примечание: при некоторых значениях углов элемент может исчезать.
Matrix
Matrix можно использовать для объединения всех преобразований в одно выражение. Но вручную создавать такие выражения невозможно. Существуют сервисы, вроде The Matrix Resolutions, которые позволяют делать такие построения.
Например через matrix следующие две функции
rotate(30deg) translate(20px, 20px)будут записаны как:
transform: matrix(0.866025, 0.5, -0.5, 0.866025, 7.32051, 27.3205)Не очень удобно для человеческого восприятия, поэтому непонятно, кто будет этим пользоваться.
3D функции
Большинство описанных выше функций имеет свои 3d аналоги. Те функции, чье название содержит в конце Z, работают с осью Z. Те же, чьи названия заканчиваются на 3d принимают 3 параметра для работы со всеми тремя осями.
TranslateZ
TranslateZ сдвигают объект относительно его положения по оси Z на заданное значение. Но эффект от применения будет заметен только при использовании перспективы (perspective) и поворота элемента по осям X или Y.
Также есть общая функция translate3d.
Matrix3d
Деформация элемента в трехмерном пространстве с помощью матрицы 4х4. Как писал выше сложность применения затрудняет ее использование в ручном режиме.
ScaleZ
Масштабирование по оси Z. Но эффект будет заметен только при использовании перспективы, поворота элемента по осям X или Y, и при смещении по оси Z.
Также есть общая функция scale3d.
Rotate3d.
Определяет вращение в трехмерном пространстве.
Что она делает проще показать на примере. На демонстрации размещено 4 блока с текстом, соответствующим применяемой к элементу функцией. Угол везде использован 50deg.
К первому синему элементу не применяется никакой трансформации. Ко второму элементу применена rotateX , к третьему – rotateX , к четвертому – rotateZ .
Perspective
Создает ощущение перспективы у объекта. В качестве параметра нужно указать расстояние от плоскости монитора до точки сходимости линий. Задавать нужно только положительное значение. Чем больше значение, тем менее выраженной будет перспектива и наоборот. Эффект заметен при одновременном применении функции rotate .