Как повернуть элемент css
Замена текста картинкой
- Невозможность пользователю копировать информацию, в указанном контейнере;
- Сложность процедуры внесения исправлений в текстовую часть элемента;
- Увеличивается трафик на сервере сайта;
- Рост обращений к серверу при обновлении ресурса.
Несмотря на то, что нашлось такое количество негативных сторон применения картинки, у метода есть пару положительных эффектов.
- Кроссбраузерность — отсутствие проблем при отображении в разных браузерах.
- Высокая способность в позиционировании изображения.
Все-таки в данном случае отрицательные стороны перевешивают. Советую Вам обратиться к другим решениям.
Использование свойства 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.
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-кода точка поворота находится на краю блока. Во втором способе эта точка расположена в центре элемента. Для упрощения понимания смотрим на картинку ниже
CSS transform Property
Rotate, skew, and scale three different elements:
div.b transform: skewY(20deg);
>
div.c transform: scaleY(1.5);
>
Definition and Usage
The transform property applies a 2D or 3D transformation to an element. This property allows you to rotate, scale, move, skew, etc., elements.
| Default value: | none |
|---|---|
| Inherited: | no |
| Animatable: | yes. Read about animatable Try it |
| Version: | CSS3 |
| JavaScript syntax: | object.style.transform=»rotate(7deg)» Try it |
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
Numbers followed by -webkit-, -moz-, or -o- specify the first version that worked with a prefix.
| Property | |||||
|---|---|---|---|---|---|
| transform (2D) | 36.0 4.0 -webkit- |
10.0 9.0 -ms- |
16.0 3.5 -moz- |
9.0 3.2 -webkit- |
23.0 15.0 -webkit- 10.5 -o- |
| transform (3D) | 36.0 12.0 -webkit- |
12.0 | 10.0 | 9.0 4.0 -webkit- |
23.0 15.0 -webkit- |
Syntax
transform: none|transform-functions|initial|inherit;
Property Values
| Value | Description | Demo |
|---|---|---|
| none | Defines that there should be no transformation | Demo ❯ |
| matrix(n,n,n,n,n,n) | Defines a 2D transformation, using a matrix of six values | Demo ❯ |
| matrix3d (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) |
Defines a 3D transformation, using a 4×4 matrix of 16 values | |
| translate(x,y) | Defines a 2D translation | Demo ❯ |
| translate3d(x,y,z) | Defines a 3D translation | |
| translateX(x) | Defines a translation, using only the value for the X-axis | |
| translateY(y) | Defines a translation, using only the value for the Y-axis | |
| translateZ(z) | Defines a 3D translation, using only the value for the Z-axis | |
| scale(x,y) | Defines a 2D scale transformation | Demo ❯ |
| scale3d(x,y,z) | Defines a 3D scale transformation | |
| scaleX(x) | Defines a scale transformation by giving a value for the X-axis | |
| scaleY(y) | Defines a scale transformation by giving a value for the Y-axis | |
| scaleZ(z) | Defines a 3D scale transformation by giving a value for the Z-axis | |
| rotate(angle) | Defines a 2D rotation, the angle is specified in the parameter | Demo ❯ |
| rotate3d(x,y,z,angle) | Defines a 3D rotation | |
| rotateX(angle) | Defines a 3D rotation along the X-axis | Demo ❯ |
| rotateY(angle) | Defines a 3D rotation along the Y-axis | Demo ❯ |
| rotateZ(angle) | Defines a 3D rotation along the Z-axis | |
| skew(x-angle,y-angle) | Defines a 2D skew transformation along the X- and the Y-axis | Demo ❯ |
| skewX(angle) | Defines a 2D skew transformation along the X-axis | Demo ❯ |
| skewY(angle) | Defines a 2D skew transformation along the Y-axis | Demo ❯ |
| perspective(n) | Defines a perspective view for a 3D transformed element | |
| initial | Sets this property to its default value. Read about initial | |
| inherit | Inherits this property from its parent element. Read about inherit |
More Examples
Images thrown on the table
This example demonstrates how to create «polaroid» pictures and rotate the pictures.
apt.ru
Timeweb — компания, которая размещает проекты клиентов в Интернете, регистрирует адреса сайтов и предоставляет аренду виртуальных и физических серверов. Разместите свой сайт в Сети — расскажите миру о себе!
Виртуальный хостинг
Быстрая загрузка вашего сайта, бесплатное доменное имя, SSL-сертификат и почта. Первоклассная круглосуточная поддержка.
от 196 руб руб. / мес
Аренда VDS и VPS
Виртуальные серверы с почасовой оплатой. Меняйте конфигурацию сервера в любой момент и в пару кликов.