Css повернуть на 90 градусов. Пример #1

Свойство CSS transform (от слова "трансформация") позволяет видоизменять элемент на html-страницах. Например, можно

• вращать
• смещать
• изменять масштаб
• наклонять
• комбинировать выше описанные действия

Благодаря этому свойству можно создавать интересные эффекты без применения JavaScript, что позволяет ускорять работу браузера. Важно так же отметить, что есть возможность кобминировать эффект с временными задержками.

1. Синтаксис CSS transform

transform : трансформация1 [трансформация2 ];

Допускается одновременно несколько действий с объектом (например, вращать, сместить и изменить масштаб).

Не все браузеры поддерживают трансформацию. Необходимо использовать вендорные префиксы CSS :

• -ms-transform - для IE9 и старше (младше девятой версии трансформация не поддерживается
• -webkit-transform - для Chrome, Safari, Android и iOS
• -o-transform - для Opera до версии 12.10
• -moz-transform - для Firefox до версии 16.0

2. transform:rotate(x) - вращение объекта

Чтобы вращать элемент существует команда rotate(x) . Она позволяет повернуть объект на x градусов по часовой или против часовой стрелке. Значение х нужно указывать в градусах deg

Пример #1. Вращение объекта в html через трансформацию

Примечание

Свойства:

-ms-transform : rotate (20deg ); -webkit-transform : rotate (20deg ); -o-transform : rotate (20deg ); -moz-transform : rotate (20deg );

Нужны для корректной работы в старых версиях браузеров. В следующих примерах мы также будем их писать.

Пример #2. Вращение объекта в html при наведении курсора

Создадим класс kvadrat2 и пропишем для него псевдокласс :hover , в котором и будет прописано вращение и смена цвета на более светлый (с #444 на #888).

На странице преобразуется в следующее

Но это вращение происходит резко и не смотрится "эффектно". Это можно легко исправить сделав сглаживание. В следующем примере будет реализована анимация.

Пример #3. Плавное вращение при наведении курсора (анимация) в html

Для плавного вращения (или другими словами сглаживания) необходимо прописать еще одно свойство transition . Это свойство отвечает за время и эффект сглаживания. В данном примере рассматривается самый простой случай с переходом за 1 секунду с линейной скоростью linear

На странице преобразуется в следующее

Стало гораздо симпатичнее и такая анимация дает множество возможностей для создания эффектов на сайте только за счет CSS.

3. transform:translate(x,y) - смещение объекта

Следующей командой, которую мы рассмотрим это команда для перемещения объекта translate(x,y) , где аргументы в скобках - смещение по оси Х и У соответственно.

Пример #4. Смещение объектов в html через трансформацию

На странице преобразуется в следующее

Такие эффекты зачастую используются. Ведь это дает возможность создавать анимацию без JavaScript. В данном случае квадрат перемещается мгновенно (без анимации).

Если нужно применить преобразование только по одной из осей, то можно воспользоваться более частным случаем: translateX(x) - смещение по Х, translateY(y) - смещение У.

4. transform:scale(x,y) - масштабирование объекта

Команда для масштабирования объекта scale(x,y) , где аргументы в скобках - масштабирование по осям Х и У соответственно.

Пример #5. Масштабирование объектов в html

На странице преобразуется в следующее

При наведении квадрат становится больше по горизонтали на 50% (коэффициент 1.5), а по вертикали на 30% (коэффициент 1.3). Значение 1 означает отсутствие масштабирования. Все что меньше 1, будет означать уменьшение объекта.

Если нужно применить преобразование только по одной из осей, то можно воспользоваться более частным случаем: scaleX(x) - масштабирование по Х, scaleY(y) - масштабирование по У.

5. transform:skew - наклон объекта

Команда для наклона объекта skew(x,y) , где аргументы в скобках - наклон по осям Х и У соответственно. Наклон необходимо указывать в градусах deg .

Пример #6. Наклон объектов в html

На странице преобразуется в следующее

При наведении квадрат трансформируется в ромб благодаря наклону.

Если нужно применить преобразование только по одной из осей, то можно воспользоваться более частным случаем: skewX(x) - наклон по Х, skewY(y) - наклон по У.

6. Комбинирование значений transform

Настало время рассмотреть интересные эффекты, которые можно получить комбинируя вместе различные трансформации. Применим сразу три действия по изменения объекта масштабирование (scale ), вращение (rotate ) и перемещения (translate ).

Пример #7. Комбинирование значений transform

Исходное значение: квадрат с черной рамкой. При наведении на него он вращаясь превратится в круг с красной рамкой и изменит цвет.

На странице преобразуется в следующее

7. Другие значения transform

Мы рассмотрели самые основные значения transform . Рассмотрим остальные возможности.

• none - отсутствие преобразований (по умолчанию включено оно);
• matrix(x,x,x,x,x,x) - преобразование 2D с помощью матрицы из 6 значений;
• matrix3d(x,x,x,x,x,x,x,x,x,x,x,x,x,x,x,x) - преобразование 3D с помощью матрицы из 16 значений;
• translate3d(x,y,z) - перемещение 3d (по сравнению с обычным перемещением, здесь добавлена еще третья координата);
• scale3d(x,y,z) - масштабирование в 3d (по сравнению с обычным масштабированием, здесь добавлена еще третья координата);
• rotate3d(x,y,z) - вращение в 3d (по сравнению с обычным вращением, здесь добавлена еще третья координата);
• rotateX(x) - 3d вращение по оси X;
• rotateY(x) - 3d вращение по оси Y;
• rotateZ(x) - 3d вращение по оси Z;
• perspective(n) - перспектива для преобразования 3D элемента;

В JavaScript свойство CSS transform доступно по следующим свойствам:

object.style.transform="Трансформация" document.getElementById("elementID").style.transform = ""

Возможно, вы зададите вопрос "а зачем вообще использовать transform, когда можно просто изменять данные объекта как нам нужно. Например, изменив размеры объекта?" Разница в том, что свойств transform при трансформации никак не сдвигает другие элементы на странице. В случае же простого изменения размеров объекта это неминуемо приводит к сдвигу соседних объектов вокруг, что, как правило, некрасиво.

Перевод: Влад Мержевич

Масштабирование, наклон и поворот любого элемента возможен с помощью свойства CSS 3 transform . Оно поддерживается всеми современными браузерами (с префиксами) и допускает изящную деградацию, к примеру:

#myelement { -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); -ms-transform: rotate(30deg); -o-transform: rotate(30deg); transform: rotate(30deg); }

Хорошая штука. Однако вращается элемент целиком - его содержимое, границы и фоновая картинка. Что делать, если вы желаете повернуть только фоновое изображение? Или чтобы фон остался на месте, а элемент поворачивался?

В настоящее время у W3C нет предложений по трансформации фонового изображения. Это было бы невероятно полезно, поэтому подозреваю, нечто появится в конце концов, но не поможет разработчикам, которые хотят использовать подобные эффекты сегодня.

К счастью, есть решение. В сущности, это хак, который добавляет фоновое изображение к псевдоэлементу :before или :after , а не к родительскому контейнеру. Псевдоэлемент может трансформироваться независимо.

Трансформация только фона

У контейнера может не быть никаких стилей, но необходимо задать position: relative , поскольку наш псевдоэлемент располагается внутри. Также установите overflow: hidden , в противном случае фон будет выходить за пределы контейнера.

#myelement { position: relative; overflow: hidden; }

Теперь мы можем создать абсолютно позиционированный псевдоэлемент с трансформируемым фоном. Свойство z-index задаём как -1, это гарантирует что фон появится под содержимым контейнера.

#myelement:before { content: ""; position: absolute; width: 200%; height: 200%; top: -50%; left: -50%; z-index: -1; background: url(background.png) 0 0 repeat; -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); -ms-transform: rotate(30deg); -o-transform: rotate(30deg); transform: rotate(30deg); }

Обратите внимание, что вам, возможно, потребуется настроить ширину псевдоэлемента, его высоту и положение. К примеру, если вы используете повторяющееся изображение, область поворота должна быть больше самого контейнера, чтобы полностью вместить фон.

Фиксация фона у трансформируемых элементов

Любые трансформации родительского контейнера применяются и к псевдоэлементам. Так что нам надо отменить трансформацию, например, если контейнер поворачивается на 30 градусов, фон должен повернуться на -30 градусов, чтобы он оказался в фиксированном положении:

#myelement { position: relative; overflow: hidden; -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); -ms-transform: rotate(30deg); -o-transform: rotate(30deg); transform: rotate(30deg); } #myelement:before { content: ""; position: absolute; width: 200%; height: 200%; top: -50%; left: -50%; z-index: -1; background: url(background.png) 0 0 repeat; -webkit-transform: rotate(-30deg); -moz-transform: rotate(-30deg); -ms-transform: rotate(-30deg); -o-transform: rotate(-30deg); transform: rotate(-30deg); }

Опять же, необходимо настроить размер и положение чтобы фон адекватно вписывался в родительский контейнер.

Пожалуйста, для примера. Полный код хранится внутри HTML.

Эффект работает в IE9, Firefox, Chrome, Safari и Opera. IE8 не покажет никаких трансформаций, но фон появится.

IE6 и 7 не поддерживает псевдоэлементы, поэтому фон исчезнет. Однако, если вы хотите поддерживать эти браузеры, можно добавить фоновое изображение к контейнеру, а затем установить его как none с помощью современных селекторов или через условные комментарии.

Иногда необычные дизайнерские решения вынуждают верстальщика прибегать к таким же нестандартным решениям при расположении текста. К примеру, повернуть один из текстовых элементов на определенный угол. В данной статье будут рассмотрены несколько простых решений этой задачи.

Замена текста картинкой

Наиболее примитивным решением поставленной задачи станет использование картинки. Средствами небезызвестной всем программы Adobe Photoshop текст без труда поворачивается на любой угол. Как вы понимаете, не нужно много ума, чтобы воспользоваться данным методом.

В некоторых ситуациях другим способом воспользоваться невозможно, однако в большинстве случаях отходят от использования картинки. Это объясняется рядом недостатков, которые сопутствуют указанной методике:

• Невозможность пользователю копировать информацию, в указанном контейнере;
• Сложность процедуры внесения исправлений в текстовую часть элемента;
• Увеличивается трафик на сервере сайта;
• Рост обращений к серверу при обновлении ресурса.

Несмотря на то, что нашлось такое количество негативных сторон применения картинки, у метода есть пару положительных эффектов.

• Кроссбраузерность – отсутствие проблем при отображении в разных браузерах.
• Высокая способность в позиционировании изображения.

Все-таки в данном случае отрицательные стороны перевешивают. Советую Вам обратиться к другим решениям.

Использование свойства CSS transform

Применение этого способа гораздо выше стоит в сравнении с изображением. Существенную разницу формирует гибкость в редактировании текста и возможность выделять и копировать содержимое повернутого контейнера. Главным камнем преткновения для развития этой методики была кроссбраузерность. Сейчас достигли неплохих результатов на этом фронте, что позволяет без проблем применять свойство transform .

Суть работы свойства заключается в разбитии плоскости по градусам. В следствие этого при указании определенного угла контейнер займет соответствующее положение. Стоит отметить, что свойство в чистом виде не применяется. Ему должны сопутствовать вендорные свойства, которые, собственно, и обеспечивают высокий показатель кроссбраузерности.

Важно отметить, что меняет положение не текст внутри блока, а именно сам блок, к которому обращено свойство через селектор класа или каким-либо другим способом. Ниже представлен пример использования метода

Conteiner { - moz- transform: rotate(- 45deg) ; - webkit- transform: rotate(- 45deg) ; - o- transform: rotate(- 45deg) ; - ms- transform: rotate(- 45deg) ; transform: rotate(- 45deg) ; }

По итогу получим примерно такую картину:

Обращаюсь к такому свойству, оформление без проблем будет выводится в Firefox, Opera, Internet Explower и других вебкит-браузерах.

Обращение через Javascript

Суть процесса полностью аналогична рассмотренному перед этим методом. Для его реализации необходим минимум знаний js-кода, математики и разбираться в фильтре Matrix.

Javascript

var deg2radians = Math. PI * 2 / 360 , deg = - 4 ; rad = deg * deg2radians, costheta = Math. cos (rad) , sintheta = Math. sin (rad) ; jQuery(".rotatedBlock" ) . css({ filter: "progid:DXImageTransform.Microsoft.Matrix (M11=" + costheta+ ", M12=" + (- 1 ) * sintheta+ ", M21=" + sintheta+ ", M22=" + costheta+ ", SizingMethod="auto expand", enabled=true)" } ) ;

По итогу получим в браузере ту же картину, что и при использовании свойства transform .

Даже если Вы ни символа не понимаете в этой записи – не беда. Для работы с этим кодом достаточно понимать, что во второй строчке прописывается значение угла, его вы подставляете под себя, остальное – просто копируете без изменений.

Особенности использования Javascript и CSS

Эти два метода имеют несколько незначительных отличий в принципе работы, знать и учитывать которые очень важно.

Первое отличие основывается на разности высоты блока и его положения. Выход из ситуации достаточно простой и заключается в использовании свойства margin . Отступами мы выставляем блок на нужный уровень и позицию. Прочие разногласия в позиционировании можно устранить присвоением блоку значение абсолютного позиционирования, что тоже эффектно действует.

Более сложный и индивидуальный подход основывается на применении свойства transform-origin . Суть этой методики будет описана в последующих статьях.

Следующее отличие кроется в сущности самого поворота. При использовании js-кода точка поворота находится на краю блока. Во втором способе эта точка расположена в центре элемента. Для упрощения понимания смотрим на картинку ниже

Сегодня мы с вами рассмотрим такой замечательный эффект, доступный нам благодаря CSS3. Речь идет о вращении блока или изображения. Он изумительно вписался в интерфейс сайта и, освоив данный урок, вы сможете применять данный эффект и в своих проектах.

Итак, у нас есть набор блоков с неким контентом. Мы хотим, чтобы при наведении на блок он поворачивался вокруг своей оси и показывал информацию на обороте. Думаю, все когда-то играли в карты и все помнят тот волнительный момент, когда нужно было их переворачивать картинкой вверх. Мы сейчас сделаем тоже самое. Вот наш исходный пример:

Начнем писать наш CSS. Первое, что нам предстоит сделать, раз мы работаем с 3D преобразованиями, - задать удаление нашего объекта от точки обзора. А вот и первый говнокод:

Flip-container { -webkit-perspective:1000; -moz-perspective:1000; -ms-perspective:1000; perspective:1000; }

Вы можете задать любое другое число. Поэкспериментируйте сами. Для передней (.front) и задней (.back) частей нашей игральной карты необходимо задать абсолютное позиционирование чтобы они «перекрывали» друг друга в конечном положении. Также нам нужно сделать чтобы обратная сторона переворачиваемых элементов во время анимации не отображалась. В этом нам поможет свойство backface-visibility :

Front, .back { -webkit-backface-visibility:hidden; -moz-backface-visibility:hidden; -ms-backface-visibility:hidden; backface-visibility:hidden; width:100%; height:100%; position: absolute; top: 0; left: 0; }

Зададим z-index для лицевой стороны (чтобы она в дефолтном состоянии была на верху) опишем дефолтные углы поворота относительно вертикальной оси:

/* лицевая сторона размещена над обратной */ .front { -webkit-transform: rotateY(0deg); -moz-transform:rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); z-index: 2; } /* обратная, изначально скрытая сторона */ .back { transform: rotateY(180deg); -webkit-transform:rotateY(180deg); -moz-transform:rotateY(180deg); -ms-transform: rotateY(180deg); -o-transform: rotateY(180deg); }

При наведении наши карточки будут поворачиваться, углы их сторон будут меняться с 0 до 180 градусов и со 180 градусов до 0:

/* лицевая сторона размещена над обратной */ .flip-container:hover .front { transform: rotateY(180deg); -webkit-transform:rotateY(180deg); -moz-transform:rotateY(180deg); -ms-transform: rotateY(180deg); -o-transform: rotateY(180deg); } /* обратная, изначально скрытая сторона */ .flip-container:hover .back { -webkit-transform: rotateY(0deg); -moz-transform:rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); }

Мы близки к завершению нашей работы. Осталось только дать понять браузеру как дочерние элементы должны отображаться в 3D-пространстве. Это свойство должно использоваться совместно со свойством transform и называется transform-style . Применить это свойство следует к блоку с классом.flipper , а не к.back и.front , иначе нас будет ожидать неприятный сюрприз в браузере Opera.

Flipper { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style:preserve-3d; transform-style: preserve-3d; }

Ура, у нас получилось. Мы только что научились делать поворот с помощью CSS . Что самое приятное, это поддерживают все современные браузеры. Да-да, пользователи в Internet Explorer также могут увидеть эту красоту начиная с 10 версии. К несчастью, в России сложилась порочная практика тащить за собой вереницу устаревших IE8 и IE9. Вот и мой клиент захотел чтобы в старых браузерах в момент наведения показывалась подсказка. Давайте посмотрим, что мы можем сделать.

Первое, что приходит в голову - воспользоваться директивой @supports . Мы могли бы записать:

@supports (transform-style: preserve-3d) or (-moz-transform-style: preserve-3d) or (-webkit-transform-style: preserve-3d) { /* стили для браузеров поддерживающих */ /* 3D преобразования */ }

Увы и ах, даже IE 11 ничего про нее не знает, поэтому воспользуемся старым дедовским способом:

В файде ie.css мы и опишем стили, необходимые для нашей подсказки. Я не буду приводить его здесь, т.к. он выходит за рамки данной статьи (да там и нет ничего интересного). Если хотите, можете увидеть его в нашем примере вертикального поворота с помощью CSS . Но что, если нас интересует поворот по-горизонтали? В этом случае наш код трансформируется так:

Vertical.flip-container { position: relative; } .vertical.flip-container .flipper { -webkit-transform-origin: 100% 213.5px; -moz-transform-origin: 100% 213.5px; -ms-transform-origin: 100% 213.5px; transform-origin: 100% 213.5px; } .vertical.flip-container:hover .back, .vertical.flip-container.hover .back { -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -o-transform: rotateX(0deg); -ms-transform: rotateX(0deg); transform: rotateX(0deg); } .vertical .back, .vertical.flip-container:hover .front, .vertical.flip-container.hover .front { -webkit-transform: rotateX(180deg); -moz-transform: rotateX(180deg); -o-transform: rotateX(180deg); -ms-transform: rotateX(180deg); transform: rotateX(180deg); }