Поворот css: transform

Содержание

свойство трансформации — учебник CSS

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

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

Поведение элементов

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

Кроссбраузерность

Internet Explorer вплоть до 8-й версии не поддерживает трансформацию элементов. Для обеспечения корректной работы в других браузерах свойство CSS3 transform требует использования вендорных префиксов:

-ms-transform — для Internet Explorer 9;
-webkit-transform — для Chrome 35 и ранее, Safari до версии 8 включительно, Opera с версии 15 до 22, Android 4.4.4 и ранее, iOS Safari до версии 8.4 включительно;
-o-transform — для браузера Opera 11.5;
-moz-transform — для Firefox до версии 15 включительно.

В следующих частях урока, посвященного свойству transform, мы познакомимся со значениями, которые оно принимает. И начнем мы с функции вращения rotate().

transform | CSS справочник

CSS свойство transform применяет 2D или 3D преобразование к элементу. Оно позволяет смещать, вращать, масштабировать и/или наклонять любой элемент на странице.

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

Значение	Описание
Значение по умолчанию:	none
Применяется:	к трансформируемым элементам
Анимируется:	да
Наследуется:	нет
Версия:	CSS3
Синтаксис JavaScript:	object.style.transform=»rotate(7deg)»
none	Преобразование не применяется.
matrix(n,n,n,n,n,n)	Применяет 2D преобразование с помощью матрицы из шести значений.
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	Применяет 3D преобразование с помощью матрицы из шестнадцати(4х4) значений.
translate(x,y)	Функция translate позволяет перемещать элементы влево, вправо, вверх или вниз. Эта функция аналогична поведению position: relative; При использовании этой функции, можно сдвигать элементы не влияя на поток документа.
translate3d(x,y,z)	Применяет 3D смещение.
translateX(x)	Определяет смещение, только по оси Х.
translateY(y)	Определяет смещение, только по оси У.
translateZ(z)	Определяет 3D смещение, только по оси Z.
scale(x,y)	Функция scale(x,y) масштабирует элемент горизонтально и вертикально. Если указано только одно значение, оно будет использовано сразу и для горизонтального масштабирования и для вертикального. Например, scale(1) оставит элемент такого же размера, scale(2) удвоит его пропорции, scale(0.5) уменьшит элемент в 2 раза и так далее. Предоставление различных значений будет искажать элемент. Масштабируемый элемент будет увеличиваться от своего центра или уменьшаться к нему, другими словами центр элемента будет всегда находится в одной и той же точке, не зависимо от его размера. Таково поведение элемента по умолчанию, чтобы изменить это можно воспользоваться свойством transform-origin.
scale3d(x,y,z)	Применяет 3D преобразование масштаба.
scaleX(x)	Определяет преобразование масштаба по оси Х.
scaleY(y)	Определяет преобразование масштаба по оси У.
scaleZ(z)	Определяет 3D преобразование масштаба по оси Z.
rotate(angle)	Функция rotate() поворачивает элемент вокруг точки происхождения по заданному значению угла. Как и в случае с функцией scale(), по умолчанию точка происхождения — это центр элемента.
rotate3d(x,y,z,angle)	Определяет 3D поворот.
rotateX(angle)	Определяет 3D поворот вдоль оси Х.
rotateY(angle)	Определяет 3D поворот вдоль оси У.
rotateZ(angle)	Определяет 3D поворот вдоль оси Z.
skew(x, y)	Функция skew(x, y) определяет наклон по осям X и Y. Как и следовало ожидать, x определяет наклон оси X,а y определяет наклон оси Y. Если второй параметр опущен, то перекос элемента произойдёт только по оси X.
skewX(angle)	Определяет 2D преобразование наклона вдоль оси Х.
skewY(angle)	Определяет 2D преобразование наклона вдоль оси У.
perspective(n)	Определяет перспективу для преобразования 3D элемента.
inherit	Указывает, что значение наследуется от родительского элемента.

Поворот текста под заданным углом средствами CSS

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

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

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

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

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

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

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

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

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

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

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

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

CSS

.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-кода точка поворота находится на краю блока. Во втором способе эта точка расположена в центре элемента. Для упрощения понимания смотрим на картинку ниже

Оценок: 4 (средняя 5 из 5)

9355 просмотров

Понравилась статья? Расскажите о ней друзьям:

Курсы по CSS (в открытом доступе)

Уровень сложности:

Средний

Еще интересное

Создание анимации вращения элемента средствами CSS

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

Сегодня мы рассмотрим вращение объектов вокруг своей оси. Особенность предлагаемых нами анимаций заключается в том, что вращение будет построено исключительно на правилах CSS, без использования JavaScript-кода.

Вращение двухмерных элементов

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

HTML

<div>
    <div>
        <img alt="Landing page"
 src="/sites/all/themes/mytheme/css/uslugi/uslugi/type1.png">
        <img alt="Landing page"
 src="/sites/all/themes/mytheme/css/uslugi/uslugi/type1h.png">
    </div>
</div>

CSS

.frompic {
    position: relative;
    display:inline-block;
    vertizl-align:top;
    width: 200px;
    height: 200px;
    /* определение глубины поворота */
    -webkit-perspective: 600px; /* webkit */
    -moz-perspective: 600px; /* mozilla */
    -ms-perspective: 600px; /* IE 10 */
    -o-perspective: 600px; /* opera */
    perspective: 600px; /* стандартное указание свойства */
 
}
. block {
    -webkit-transition: -webkit-transform 0.5s;
    -moz-transition: -moz-transform 0.5s;
    -ms-transition: -moz-transform 0.5s;
    -o-transition: -o-transform 0.5s;
    transition: transform 0.5s; /* продолжительность поворота */
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;   
}
.block:hover {
    -webkit-transform: rotateY( 180deg );
    -moz-transform: rotateY( 180deg );
    -ms-transform: rotateY( 180deg );
    -o-transform: rotateY( 180deg );
    transform: rotateY( 180deg );
}
.frompic img {
    position: absolute;
    display:block;
    top: 0px;
    left: 0px;
    width: 200px;
    height: 200px;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;    /* скрытия контента элемента
 после поворота */
}
. frompic {
    left:0px;
}
.img2 {
    -webkit-transform: rotateY( 180deg );
    -moz-transform: rotateY( 180deg );
    -ms-transform: rotateY(180deg);
    -o-transform: rotateY( 180deg );
    transform: rotateY( 180deg );   /* устанавливаем начальное
 положение задней стороны */
}

После корректного переноса этого кода в документ получим следующий результат

Вращение трехмерных элементов

Несмотря на появление еще одного измерения во вращаемом объекте, организация анимации не слишком усложнилась. Тут важно отметить, что для повышения реалистичности необходимо использовать несколько изображений для формирования третьего измерения. Использование множества картинок сгладит линию перелома в стыках между ними и создастся впечатление объемной рельефной поверхности.

Код для поворота объемного элемента приведен здесь.

HTML

<div>
<div>
	<figure></figure>
	<figure></figure>
	<figure></figure>
	<figure></figure>
	<figure></figure>
</div>
</div>

CSS

. container {
	margin: 100px auto auto 100px;
	position: relative;
	width: 226px;
	height: 316px;
	/* задаем глубину сцене */
	-webkit-perspective: 600px; /* webkit */
	-moz-perspective: 600px; /* mozilla */
	-ms-perspective: 600px; /* IE 10 */
	-o-perspective: 600px; /* opera когда-то
 тоже должна начать понимать */
	perspective: 600px;	/* св-во по стандартам */
}
 
#book { /* поварачивать будет общий контейнер */
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	position: absolute;
 
	-webkit-transition: -webkit-transform 1.5s;
	-moz-transition: -moz-transform 1.5s;
	-ms-transition: -moz-transform 1.5s;
	-o-transition: -o-transform 1.5s;
	transition: transform 1.5s; /* трансформации будут происходить
 анимированно продолжительностью 0.5 сек */
 
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	transform-style: preserve-3d;/* указываем, что дочерние
 элементы находятся в 3D пространстве */
 
}
#book. flip {	/* добавляя этот класс, поворачиваем
 контейнер на 180 градусов */
	-webkit-transform: rotateY( 180deg );
	-moz-transform: rotateY( 180deg );
	-ms-transform: rotateY( 180deg );
	-o-transform: rotateY( 180deg );
	transform: rotateY( 180deg );
}
 
figure {
	position: absolute;
	display: block;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	backface-visibility: hidden;	/* если элемент отвернут лицом
 от пользователя, контент этого элемента не виден */
}
.back, .front, .left-1, .left-2, .right {
	background: url(book-texture.jpg);
}
.front {
	width: 100%;
	height: 100%;
	background-position: -276px 0;
	-webkit-transform: rotateY( 0deg ) translateZ(  25px );
	-moz-transform: rotateY( 0deg ) translateZ(  25px );
	-ms-transform: rotateY(0deg) translateZ(  25px );
	-o-transform: rotateY( 0deg ) translateZ(  25px );
	transform: rotateY( 0deg ) translateZ(  25px );
	/* rotateY - поворачиваем грань на нужный угол
 translateZ - т. к. объект имеет толщину*/
}
.back {
	width: 100%;
	height: 100%;
	-webkit-transform: rotateY( 180deg ) translateZ(  25px );
	-moz-transform: rotateY( 180deg ) translateZ(  25px );
	-ms-transform: rotateY(180deg) translateZ(  25px );
	-o-transform: rotateY( 180deg ) translateZ(  25px );
	transform: rotateY( 180deg ) translateZ(  25px );
}
 
/*придаем выпуклости торцу разбиваем его на две 
части и ставим их под небольшим углом друг к другу*/
 
.left-1 {
	background-position: -250px 0;
	width: 28.5px;
	height: 100%;
	-webkit-transform: rotateY( -70deg ) translate3d(-3px, 0, 8px );
	-moz-transform: rotateY( -70deg ) translate3d(-3px, 0, 8px );
	-ms-transform: rotateY(-70deg) translate3d( -3px, 0, 8px );
	-o-transform: rotateY( -70deg ) translate3d( -3px, 0, 8px );
	transform: rotateY( -70deg ) translate3d( -3px, 0, 8px ); 
        -webkit-transform-origin: left center;
	-moz-transform-origin: left center;
	-ms-transform-origin: left center;
	-o-transform-origin: left center;
	transform-origin: left center; /* поворачиваю торцы вокруг их
 левой границы: так проще потом расположить элемент (в данном случае) */
}
. left-2 {
	background-position: -225px 0;
	width: 28px;
	height: 100%;
	-webkit-transform: rotateY( -110deg ) translate3d( -24.5px, 0, 8px );
	-moz-transform: rotateY( -110deg ) translate3d(  -24.5px, 0, 8px );
	-ms-transform: rotateY(-110deg) translate3d( -24.5px, 0, 8px );
	-o-transform: rotateY( -110deg ) translate3d( -24.5px, 0, 8px );
	transform: rotateY( -110deg ) translate3d( -24.5px, 0, 8px );
	-webkit-transform-origin: left center;
	-moz-transform-origin: left center;
	-ms-transform-origin: left center;
	-o-transform-origin: left center;
	transform-origin: left center;
}
 
.right {
	background-position: -276px 0;
	width: 50px;
	height: 100%;
	-webkit-transform: rotateY( 90deg );
	-moz-transform: rotateY( 90deg );
	-ms-transform: rotateY(90deg);
	-o-transform: rotateY( 90deg );
	transform: rotateY( 90deg );
	top: 0;
	right: 0;
}

После корректного переноса этого кода в документ получим следующий результат

В каких браузерах работает?


10. 0+	1.0+	1.0+	1.0+	1.0+	1.0+	1.0+

Оценок: 8 (средняя 5 из 5)

6569 просмотров

Понравилась статья? Расскажите о ней друзьям:

Курсы по CSS (в открытом доступе)

Уровень сложности:

Средний

Еще интересное

CSS 2D преобразований

CSS 2D-преобразования

преобразований CSS позволяют перемещать, вращать, масштабировать и наклонять элементы.

Наведите указатель мыши на элемент ниже, чтобы увидеть 2D-преобразование:

В этой главе вы узнаете о следующем свойстве CSS:

Поддержка браузера

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

Имущество
преобразовать	36. 0	10,0	16,0	9,0	23,0

CSS 2D методы преобразования

С помощью свойства CSS transform вы можете использовать
следующие методы 2D преобразования:

перевести ()
повернуть ()
шкала X ()
шкала Y ()
шкала ()
skewX ()
косой ()
перекос ()
матрица ()

Совет: Вы узнаете о трехмерных преобразованиях в следующей главе.

Метод translate ()

Метод translate () перемещает элемент из его текущей позиции (согласно
параметрам, указанным для оси X и оси Y).

В следующем примере элемент

перемещается на 50 пикселей вправо,
и на 100 пикселей вниз от текущего положения:

Метод rotate ()

Метод rotate () вращает элемент по или против часовой стрелки в зависимости от заданного градуса.

В следующем примере элемент

поворачивается на 20 градусов по часовой стрелке:

Использование отрицательных значений приведет к вращению элемента против часовой стрелки.

В следующем примере элемент

вращается против часовой стрелки на 20 градусов:

Шкала () Метод

Метод scale () увеличивает или уменьшает размер элемента (в соответствии с параметрами, заданными для ширины и высоты).

В следующем примере элемент

увеличивается в два раза от его исходной ширины и в три раза от его исходной высоты:

В следующем примере элемент

уменьшается до половины его исходной ширины и высоты:

Метод scaleX ()

Метод scaleX () увеличивает или уменьшает
ширина элемента.

В следующем примере элемент

увеличивается в два раза от его исходной ширины:

В следующем примере элемент

уменьшается до половины его исходной ширины:

Метод scaleY ()

Метод scaleY () увеличивает или уменьшает
высота элемента.

В следующем примере элемент

увеличивается в три раза по сравнению с исходным.
высота:

В следующем примере элемент

уменьшается до половины от исходного.
высота:

Метод skewX ()

Метод skewX () наклоняет элемент вдоль оси X на заданный угол.

В следующем примере элемент

наклоняется на 20 градусов по
Ось X:

Метод skewY ()

Метод skewY () наклоняет элемент вдоль оси Y на заданный угол.

В следующем примере элемент

наклоняется на 20 градусов по оси Y:

Метод skew ()

Метод skew () наклоняет элемент по осям X и Y на заданные углы.

В следующем примере элемент

наклоняется на 20 градусов по оси X и на 10 градусов по оси Y:

Если второй параметр не указан, он имеет нулевое значение.Итак, в следующем примере элемент

наклоняется на 20 градусов по оси X:

Матрица () Метод

Метод matrix () объединяет все методы 2D-преобразования в один.

Метод matrix () принимает шесть параметров, содержащих математические функции,
который позволяет вращать, масштабировать, перемещать (переносить) и наклонять элементы.

Параметры следующие: matrix (scaleX (), skewY (), skewX (), scaleY (), translateX (), translateY ())

Проверьте себя упражнениями!

Свойства преобразования CSS

В следующей таблице перечислены все свойства 2D-преобразования:

Имущество	Описание
преобразовать	Применяет 2D или 3D преобразование к элементу
преобразование происхождения	Позволяет изменять положение трансформируемых элементов

CSS 2D методы преобразования

Функция	Описание
матрица ( n, n, n, n, n, n )	Определяет двухмерное преобразование с использованием матрицы из шести значений
перевести ( x, y )	Определяет 2D-перенос, перемещая элемент по осям X и Y
translateX ( n )	Определяет 2D-перенос, перемещая элемент по оси X
перевод ( n )	Определяет 2D-перенос, перемещая элемент по оси Y
Масштаб ( x, y )	Определяет преобразование 2D масштаба, изменяя ширину и высоту элементов.
scaleX ( n )	Определяет масштабное преобразование 2D, изменяя ширину элемента.
шкала Y ( n )	Определяет преобразование 2D-масштаба, изменяя высоту элемента.
повернуть (угол )	Определяет 2D-поворот, угол указывается в параметре
перекос ( x-угол, y-)	Определяет двухмерное преобразование наклона по осям X и Y.
skewX ( угол )	Определяет двухмерное преобразование наклона по оси X
перекос ( угол )	Определяет двухмерное преобразование наклона по оси Y

Вращение CSS

Свойство поворота CSS используется для поворота HTML-элемента вокруг точки вращения .

Выпало

Свойство вращения было предложено в CSS Basic Box Model Level 3, которая сейчас устарела.

Чтобы выполнить поворот в CSS, использует свойство transform вместо (и связанные с ним свойства). Хотя это свойство все еще находится в статусе рабочего проекта (на момент написания), похоже, это путь вперед при работе с вращающимися элементами HTML с помощью CSS.

Синтаксис

вращение: <угол & gt

Возможные значения

<угол>: Определяет угол, на который элемент должен вращаться против часовой стрелки вокруг точки, заданной точкой поворота .

Кроме того, все свойства CSS также принимают следующие значения ключевых слов всего CSS в качестве единственного компонента значения своего свойства:

начальный: Представляет значение, указанное в качестве начального значения свойства.
наследовать: Представляет вычисленное значение свойства родительского элемента.
отключено: Это значение действует как наследует или как начальный , в зависимости от того, унаследовано свойство или нет.Другими словами, он устанавливает для всех свойств их родительское значение, если они наследуются, или их начальное значение, если они не наследуются.

Основная информация об имуществе

Начальное значение: 0
Относится к: Это свойство применяется только к элементам уровня блока, встроенной таблице и встроенному блоку
Унаследовано?: №
Медиа: Визуальный
Расчетное значение: Для абсолютное значение, иначе процент.

Пример кода

точка вращения: 30% 45%;
вращение: 50 градусов;

Префиксы поставщиков

Для максимальной совместимости с браузером многие веб-разработчики добавляют свойства браузера, используя такие расширения, как -webkit- для Safari, Google Chrome и Opera (более новые версии), -ms- для Internet Explorer, -moz- для Firefox, -o- для более старых версий Opera и т. д.Как и в случае с любым свойством CSS, если браузер не поддерживает проприетарное расширение, он просто проигнорирует его.

Этот метод не рекомендуется W3C, однако во многих случаях единственный способ проверить свойство — это включить расширение CSS, совместимое с вашим браузером.

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

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

Вы также можете использовать Autoprefixer с такими препроцессорами, как Less и Sass.

css — Как я могу повернуть HTML на 90 градусов?

Переполнение стека

Около
Товары
Для команд

Переполнение стека
Общественные вопросы и ответы
Переполнение стека для команд
Где разработчики и технологи делятся частными знаниями с коллегами
Вакансии
Программирование и связанные с ним технические возможности карьерного роста
Талант
Нанимайте технических специалистов и создавайте свой бренд работодателя
Реклама
Обратитесь к разработчикам и технологам со всего мира

повернуть — CSS 3 файла

Используется для поворота элементов.

Совместимость

-webkit-transform: поворот Safari 5+, Chrome 10+ iOS 3.2+ Android 2.1+ Blackberry 7+
-ms-transform: поворот Internet Exlorer 9+
преобразование: поворот Firefox 16+ Inernet Explorer 10+ Opera 12.1+ IE Mobile 10+

Не поддерживается Opera Mini. Для получения подробной информации о совместимости посетите caniuse.com.

Firefox 16 + Safari 5+, Chrome 10 + Internet Explorer 9 + Internet Explorer 10 + Opera 12.1+
iOS 3.2 + Android 2.1 + Blackberry 7 + IE Mobile 10+

Общее описание

Начало вращения находится в центре элемента.Чтобы изменить источник, см. Transform-origin. Можно комбинировать несколько преобразований.

преобразование: поворот (1 30 градусов)

1 Элемент повернут на 30 градусов по часовой стрелке. Отрицательные значения приводят к вращению против часовой стрелки.

Пример

Элемент, повернутый против часовой стрелки

преобразование: поворот (1-40 градусов)

1 Элемент повернут против часовой стрелки на 40 градусов.

Дополнительная литература

Для получения дополнительной информации см. Сайт W3C, сайт Safari и сайт MDN (включая информацию о совместимости для более старых версий браузеров).

Используется для масштабирования элементов.

Совместимость

-webkit-transform: масштабирование Safari 5+, Chrome 10+ iOS 3.2+ Android 2.1+ Blackberry 7+
-ms-transform: масштабирование Internet Exlorer 9+
преобразование: масштабирование Firefox 16+ Firefox 16+ Opera 12.1+ IE Mobile 10 +

Не поддерживается Opera Mini. Для получения подробной информации о совместимости посетите caniuse.com.

Firefox 16 + Safari 5+, Chrome 10 + Internet Explorer 9 + Internet Explorer 10 + Opera 12.1+
iOS 3.2 + Android 2.1 + Blackberry 7 + IE Mobile 10+

Общее описание

Комбинированное обозначение

Источник преобразования находится в центре элемента. Чтобы изменить источник, см. Transform-origin. Можно комбинировать несколько преобразований.

преобразование: масштаб (1 2, 2 1,5)

Коэффициент масштабирования, где 1 означает исходный размер, 2 — удвоенный размер и т. Д. Элемент масштабируется как по горизонтали (ось x), так и по вертикали (ось y) с одинаковым коэффициентом.Отрицательные значения отражают элемент.
Необязательно. Коэффициент вертикального масштабирования. Если задан коэффициент, отмеченный цифрой 1, это означает изменение по горизонтали. В этом случае элемент масштабируется в 2 раза по горизонтали и 1,5 по вертикали.

Горизонтальная шкала

преобразование: scaleX (1 2)

1 Коэффициент горизонтального масштабирования.

Вертикальный масштаб

преобразование: scaleY (1 1,5)

1 Коэффициент вертикального масштабирования.

Дополнительная литература

Используется для наклона элементов.

Совместимость

-webkit-transform: перекос Safari 5+, Chrome 10+ iOS 3.2+ Android 2.1+ Blackberry 7+
-ms-transform: перекос Internet Exlorer 9+
преобразование: перекос Firefox 16+ Firefox 16+ Opera 12.1+ IE Mobile 10 +

Не поддерживается Opera Mini. Для получения подробной информации о совместимости посетите caniuse.com.

Firefox 16 + Safari 5+, Chrome 10 + Internet Explorer 9 + Internet Explorer 10 + Opera 12.1+
iOS 3.2 + Android 2.1 + Blackberry 7 + IE Mobile 10+

Общее описание

Комбинированное обозначение

преобразование: наклон (1 30 градусов, 2 10 градусов)

Элемент наклонен вокруг оси x (по горизонтали) на 30 градусов. Положительные значения представляют наклон влево, отрицательные значения наклоняют элемент вправо.
Необязательно. Угол наклона вокруг оси Y (по вертикали). Если задано значение 1, представляет собой угол наклона вокруг оси x. Положительные значения наклоняют элемент вниз, отрицательные значения представляют наклон к вершине. В этом случае элемент наклоняется на 30 градусов по горизонтали (влево) и на 10 градусов по вертикали (вниз).

Горизонтальный перекос

преобразование: skewX (1 30deg)

1 Угол наклона вокруг оси x (по горизонтали).

Вертикальный перекос

преобразование: skewY (1 10deg)

1 Угол наклона вокруг оси Y (по вертикали).

Дополнительная литература

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

Совместимость

-webkit-transform: перевод Safari 5+, Chrome 10+ iOS 3.2+ Android 2.1+ Blackberry 7+
-ms-transform: перевод Internet Exlorer 9+
transform: перевод Firefox 16+ Firefox 16+ Opera 12.1+ IE Mobile 10 +

Не поддерживается Opera Mini. Для получения подробной информации о совместимости посетите caniuse.com.

Firefox 16 + Safari 5+, Chrome 10 + Internet Explorer 9 + Internet Explorer 10 + Opera 12.1+
iOS 3.2 + Android 2.1 + Blackberry 7 + IE Mobile 10+

Общее описание

Комбинированное обозначение

Источник преобразования находится в центре элемента.Чтобы изменить источник, см. Transform-origin. Можно комбинировать несколько преобразований.

преобразовать: перевести (1 100 пикселей, 2 20 пикселей)

Элемент перемещен на 100 пикселей вправо. Отрицательные значения представляют собой сдвиг влево.
Необязательно. Вертикальный сдвиг. Если задано значение 1, это означает горизонтальное движение. Положительные значения перемещают элементы вниз, отрицательные значения — вверх. В этом случае элемент перемещается на 100 пикселей вправо и на 20 пикселей вниз.

Горизонтальный перевод

преобразование: translateX (1 100px)

1 Значение горизонтального смещения.

Вертикальный перевод

преобразование: translateY (1 20px)

1 Значение вертикального сдвига.

Пример

Объединение нескольких преобразований

преобразование: поворот (1 33 град.) Масштаб (2 1,5)

Элемент повернут по часовой стрелке на 33 градуса.
Он также увеличивается в 1,5 раза одновременно (без запятой!).

Дополнительная литература

Задает исходную точку для преобразований элемента.

Совместимость

-webkit-transform-origin Safari 5+, Chrome 10+ iOS 3.2+ Android 2.1+ Blackberry 7+
-ms-transform-origin Internet Exlorer 9+
transform-origin Firefox 16+ Firefox 16+ Opera 12.1+ IE Mobile 10 +

Не поддерживается Opera Mini. Для получения подробной информации о совместимости посетите caniuse.com.

Firefox 16 + Safari 5+, Chrome 10 + Internet Explorer 9 + Internet Explorer 10 + Opera 12.1+
iOS 3.2 + Android 2.1 + Blackberry 7 + IE Mobile 10+

Общее описание

transform-origin: 1 слева 2 вверху

Горизонтальное положение исходной точки для преобразований (ось x). Также может быть процентное значение, где 0% означает левое, 50% — центральное и 100% — правое. Возможны промежуточные значения, а также значения длины с контрольной точкой в верхнем левом углу. В каждом случае возможны отрицательные значения. По умолчанию исходная точка преобразования располагается по горизонтали и вертикали в центре элемента (50% 50%).
Необязательно. Вертикальное положение начала координат. 0% означает верх, 100% — право. Остальное из 1 здесь также применимо.

Пример

Один набор значений

transform-origin: 1 справа

1 Исходная точка для преобразований устанавливается по горизонтали вправо и по центру по вертикали (50%).

Установка двух процентных значений

трансформация происхождения: 1 25% 2 75%

Начало координат по оси x (по горизонтали) находится на 25% от левого края.
Начало оси Y (по горизонтали) — 75% сверху.

Дополнительная литература

Минутку …

Пожалуйста, включите куки и перезагрузите страницу.

Это автоматический процесс. Ваш браузер в ближайшее время перенаправит вас на запрошенный контент.

Подождите до 5 секунд…

+ ((! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] — (!! [])) + (! + [] — (!! [])) + (! + [] + (!! []) + !! []) + (! + [] + (!! []) + !! [] + !! []) + (! + [] + (!! []) + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [])) / + ((! + [] + (!! []) + !! [] + !! [] + []) + (! + [] — (! ! [])) + (+ !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) — []) + (! + [] + (!! []) + !! [] + !! []) + (! + [] + (!! [] ) + !! [] + !! [] + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] — (!! []) ) + (! + [] + (!! []) + !! [] + !! []))

+ ((! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! [] + !! [] + []) + (! + [] + ( !! []) — []) + (! + [] — (!! [])) + (! + [] + (!! []) + !! [] + !! []) + (+ !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! [] +! ! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! []) + ( ! + [] + (!! []) — []) + (! + [] + (!! []) + !! [])) / + ((! + [] + (!! []) — [] + []) + (! + [] + (!! []) + !! []) + (! + [] — (!! [])) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! []) + (! + [] + ( !! []) + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! []))

+ ((! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! [] + []) + (! + [] + (!! []) + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] — (!! [])) + (! + [] + (!! []) + !! [] + !! [] ) + (+ !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! []) + (+ !! [])) / + ((! + [] + (!! []) — [] + []) + ( ! + [] + (!! []) + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! [] ) + (! + [] + (!! []) + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! [] +! ! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! []) + (! + [] — (!! [])))

+ ((! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! [ ] + []) + (! + [] + (!! []) + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] — (!! [])) + (! + [] + (!! []) + !! [] + !! []) + (+ !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! []) + ( ! + [] + (!! []) + !! [] + !! []) + (+ !! [])) / + ((! + [] + (!! []) + !! [ ] + !! [] + !! [] + []) + (! + [] + (!! []) + !! []) + (! + [] + (!! []) + !! [] + !! []) + (! + [] + (!! []) — []) + (! + [] + (!! []) + !! [] + !! [] +! ! [] + !! []) + (+ !! []) + (! + [] + (!! []) + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! []))

+ (( ! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! [] + []) + (! + [ ] + (!! []) + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [ ] + (!! []) + !! [] + !! [] + !! []) + (! + [] — (!! [])) + (! + [] + (!! [] ) + !! [])) / + ((+ !! [] + []) + (+ !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! []) + (! + [] — (!! [])) + (+ !! []) + (! + [] + (!! []) +! ! [] + !! [] + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! []) + (+ !! []) + (! + [] + (!! []) + !! []))

+ ((! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! [] + []) + (! + [] + (! ! []) + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] — (!! [])) + (! + [] + ( !! []) + !! [] + !! []) + (+ !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! []) + (+ !! [])) / + ((+ !! [] + []) + (+ !! []) + (! + [] + (!! []) + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! []) + (! + [] — (!! [])) + ( ! + [] + (!! []) — []) + (! + [] + (!! []) — []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! []))

+ ((! + [] + (!! []) + !! [] + !! [] +! ! [] + !! [] + !! [] + !! [] + !! [] + []) + (! + [] + (!! []) + !! [] + !! [] ) + (+ !! []) + (! + [] — (!! [])) + (! + [] + (!! []) + !! [] + !! [] + !! [ ] + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) +! ! [] + !! [] + !! [] + !! [] + !! [] + !! []) + (+ !! [])) / + ((! + [] + (!! []) + !! [] + !! [] + !! [] + []) + (! + [] + (!! []) + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] +! ! []) + (! + [] + (!! []) — []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) — []) + (! + [] + (!! []) — []) + (! + [] — (!! [])))

+ ((! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] — (!! [])) + (! + [] — (!! [])) + (! + [] + (!! []) + !! []) + (! + [] + (!! []) + !! [] + !! []) + (! + [] + ( !! []) + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! []) ) / + ((! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + []) + (! + [ ] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! [] ) + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! [] ) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! [] + !! []) + ( + !! []))

+ ((! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] +! ! [] + []) + (! + [] + (!! []) + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] — (!! [])) + (! + [] + (!! []) + !! [] + !! []) + (+ !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [])) / + ((! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! [] + !! [] + []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [ ] + !! [] + !! []) + (+ !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] +! ! [] + !! []) + (! + [] + (!! []) + !! [] + !! []) + (+ !! []) + (! + [] + (! ! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) +! ! [] + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! []))

+ ((! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! [] + []) + (! + [] + (!! []) + !! []) + (! + [ ] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] — (!! [ ])) + (! + [] + (!! []) + !! [] + !! []) + (+ !! []) + (! + [] + (!! []) +! ! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [])) / + ((! + [] + (!! []) +! ! [] + !! [] + !! [] + !! [] + []) + (! + [] + (!! []) + !! []) + (! + [] + (! ! []) — []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [ ] + !! [] + !! [] + !! [] + !! []))

+ ((! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [ ] + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] — (!! [])) + (! + [] — (!! [])) + (! + [] + (!! []) + !! []) + (! + [] + (!! []) + !! [] + !! []) + (! + [] + (!! []) + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [])) / + ((! + [] + (!! [] ) + !! [] + !! [] + []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] +! ! [] + !! []) + (! + [] + (!! []) + !! []) + (! + [] + (!! []) + !! [] + !! [ ] + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! [] + !! [] + !! [] + !! []) + (! + [] + (!! []) + !! []) + (+ !! []))