Rotate div with css

CSS transform Property

Rotate, skew, and scale three different elements:

div.b transform: skewY(20deg);
>

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

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.

Источник

rotate()

The rotate() CSS function defines a transformation that rotates an element around a fixed point on the 2D plane, without deforming it. Its result is a data type.

Try it

The fixed point that the element rotates around — mentioned above — is also known as the transform origin. This defaults to the center of the element, but you can set your own custom transform origin using the transform-origin property.

Syntax

Values

Cartesian coordinates on ℝ^2	Homogeneous coordinates on ℝℙ^2	Cartesian coordinates on ℝ^3	Homogeneous coordinates on ℝℙ^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]

Examples

Basic example

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

Combining rotation with another transformation

If you want apply multiple transformations to an element, be careful about the order in which you specify your transformations. For example, if you rotate before translating, the translation will be along the new axis of rotation!

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

Specifications

Browser compatibility

BCD tables only load in the browser

See also

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

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.

Источник