transform

rotate

The rotate CSS property allows you to specify rotation transforms individually and independently of the transform property. This maps better to typical user interface usage, and saves having to remember the exact order of transform functions to specify in the transform property.

Try it

Syntax

/* Keyword values */ rotate: none; /* Angle value */ rotate: 90deg; rotate: 0.25turn; rotate: 1.57rad; /* x, y, or z axis name plus angle */ rotate: x 90deg; rotate: y 0.25turn; rotate: z 1.57rad; /* Vector plus angle value */ rotate: 1 1 1 90deg; /* Global values */ rotate: inherit; rotate: initial; rotate: revert; rotate: revert-layer; rotate: unset; 

Values

x, y, or z axis name plus angle value

Specifies that no rotation should be applied.

Formal definition

Formal syntax

Examples

Rotating an element on hover

The following example shows how to use the rotate property to rotate an element along various axes on hover. The first box rotates 90 degrees on the Z axis hover, the second rotates 180 degrees on the Y axis on hover, and the third rotates 360 degrees on hover around a vector defined by coordinates.

HTML

div class="box" id="box1">rotate Zdiv> div class="box" id="box2">rotate Ydiv> div class="box" id="box3">vector & anglediv> 

CSS

.box  display: inline-block; margin: 1em; min-width: 6.5em; line-height: 6.5em; text-align: center; transition: 1s ease-in-out; border: 0.25em dotted; > #box1:hover  rotate: 90deg; > #box2:hover  rotate: y 180deg; > #box3:hover  rotate: 1 2 1 360deg; > 

Result

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Note: skew is not an independent transform value

Found a content problem with this page?

This page was last modified on Feb 21, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

transform

The transform CSS property lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model.

Try it

If the property has a value different than none , a stacking context will be created. In that case, the element will act as a containing block for any position: fixed; or position: absolute; elements that it contains.

Warning: Only transformable elements can be transform ed. That is, all elements whose layout is governed by the CSS box model except for: non-replaced inline boxes, table-column boxes, and table-column-group boxes.

Syntax

/* Keyword values */ transform: none; /* Function values */ transform: matrix(1, 2, 3, 4, 5, 6); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: perspective(17px); transform: rotate(0.5turn); transform: rotate3d(1, 2, 3, 10deg); transform: rotateX(10deg); transform: rotateY(10deg); transform: rotateZ(10deg); transform: translate(12px, 50%); transform: translate3d(12px, 50%, 3em); transform: translateX(2em); transform: translateY(3in); transform: translateZ(2px); transform: scale(2, 0.5); transform: scale3d(2.5, 1.2, 0.3); transform: scaleX(2); transform: scaleY(0.5); transform: scaleZ(0.3); transform: skew(30deg, 20deg); transform: skewX(30deg); transform: skewY(1.07rad); /* Multiple function values */ transform: translateX(10px) rotate(10deg) translateY(5px); transform: perspective(500px) translate(10px, 0, 20px) rotateY(3deg); /* Global values */ transform: inherit; transform: initial; transform: revert; transform: revert-layer; transform: unset; 

The transform property may be specified as either the keyword value none or as one or more values.

If perspective() is one of multiple function values, it must be listed first.

Values

One or more of the CSS transform functions to be applied. The transform functions are multiplied in order from left to right, meaning that composite transforms are effectively applied in order from right to left.

Specifies that no transform should be applied.

Accessibility concerns

Scaling/zooming animations are problematic for accessibility, as they are a common trigger for certain types of migraine. If you need to include such animations on your website, you should provide a control to allow users to turn off animations, preferably site-wide.

Also, consider making use of the prefers-reduced-motion media feature — use it to write a media query that will turn off animations if the user has reduced animation specified in their system preferences.

Formal definition

Initial value	none
Applies to	transformable elements
Inherited	no
Percentages	refer to the size of bounding box
Computed value	as specified, but with relative lengths converted into absolute lengths
Animation type	a transform
Creates stacking context	yes

Источник

rotate()

Функция CSS rotate () определяет преобразование, которое перемещает элемент вокруг неподвижной точки (как определено свойством transform-origin (en-US), не деформируя его. Количество движения определяется заданным углом; если положительно, движение будет по часовой стрелке, если оно отрицательное, оно будет против часовой стрелки. Вращение на 180 ° называется точечным отражением.

Синтаксис

Значения

Декартовы координаты на ℝ 2	Однородные координаты на ℝℙ 2	Декартовы координаты на ℝ 3	Однородные координаты на ℝℙ 3
cos(a) -sin(a) sin(a) cos(a)	cos(a) -sin(a) 0 sin(a) cos(a) 0 0 0 1	cos(a) -sin(a) 0 sin(a) cos(a) 0 0 0 1	cos(a) -sin(a) 0 0 sin(a) cos(a) 0 0 0 0 1 0 0 0 0 1
	[cos(a) sin(a) -sin(a) cos(a) 0 0]

Примеры

Базовый пример

HTML

div>Normaldiv> div class="rotated">Rotateddiv> 

CSS

div  width: 80px; height: 80px; background-color: skyblue; > .rotated  transform: rotate(45deg); /* Equal to rotateZ(45deg) */ background-color: pink; > 

Result

Объединение вращения с другим преобразованием

Если вы хотите применить к элементу несколько преобразований, будьте осторожны с порядком, в котором вы указываете свои преобразования. Например, если вы вращаете перед сдвигом, сдвиг произойдёт относительно новой оси вращения!

HTML

div>Normaldiv> div class="rotate">Rotateddiv> div class="rotate-translate">Rotated + Translateddiv> div class="translate-rotate">Translated + Rotateddiv> 

CSS

div  position: absolute; left: 40px; top: 40px; width: 100px; height: 100px; background-color: lightgray; > .rotate  background-color: transparent; outline: 2px dashed; transform: rotate(45deg); > .rotate-translate  background-color: pink; transform: rotate(45deg) translateX(180px); > .translate-rotate  background-color: gold; transform: translateX(180px) rotate(45deg); > 

Result

Спецификации

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

BCD tables only load in the browser

Смотрите также

Found a content problem with this page?

This page was last modified on 5 дек. 2022 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

transform

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

Синтаксис

Значения

Функции трансформации

matrix

rotate

Поворот элемента на заданный угол относительно точки трансформации, задаваемой свойством transform-origin .

scale

Масштаб элемента по горизонтали и вертикали.

Значение больше 1 увеличивает масштаб элемента, меньше 1 — уменьшает масштаб.

scaleX

Масштабирует элемент по горизонтали.

scaleY

Масштабирует элемент по вертикали.

skewX

Наклоняет элемент на заданный угол по вертикали.

skewY

Наклоняет элемент на заданный угол по горизонтали.

translate

Сдвигает элемент на заданное значение по горизонтали и вертикали.

translateX

Сдвигает элемент по горизонтали на указанное значение. Положительное значение сдвигает вправо, отрицательное влево.

translateY

Сдвигает элемент по вертикали на указанное значение. Положительное значение сдвигает вниз, отрицательное вверх.

HTML5 CSS3 IE Cr Op Sa Fx

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

Объектная модель

[window.]document.getElementById(» elementID «).style.transform

Браузеры

Internet Explorer 9 поддерживает нестандартное свойство -ms-transform .

Chrome, Safari, Android и iOS поддерживают нестандартное свойство -webkit-transform .

Opera до версии 12.10 поддерживает нестандартное свойство -o-transform .

Firefox до версии 16.0 поддерживает нестандартное свойство -moz-transform .

Источник