0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

CSS transform Property

CSS transform Property

Rotate, skew, and scale three different <div> 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.

To better understand the transform property, view a demo.

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.010.09.0
4.0 -webkit-
23.0
15.0 -webkit-

Syntax

Property Values

ValueDescriptionPlay it
noneDefines that there should be no transformationPlay it »
matrix(n,n,n,n,n,n)Defines a 2D transformation, using a matrix of six valuesPlay it »
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 translationPlay it »
translate3d(x,y,z)Defines a 3D translation
translateX(x)Defines a translation, using only the value for the X-axisPlay it »
translateY(y)Defines a translation, using only the value for the Y-axisPlay it »
translateZ(z)Defines a 3D translation, using only the value for the Z-axis
scale(x,y)Defines a 2D scale transformationPlay it »
scale3d(x,y,z)Defines a 3D scale transformation
scaleX(x)Defines a scale transformation by giving a value for the X-axisPlay it »
scaleY(y)Defines a scale transformation by giving a value for the Y-axisPlay it »
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 parameterPlay it »
rotate3d(x,y,z,angle)Defines a 3D rotation
rotateX(angle)Defines a 3D rotation along the X-axisPlay it »
rotateY(angle)Defines a 3D rotation along the Y-axisPlay it »
rotateZ(angle)Defines a 3D rotation along the Z-axisPlay it »
skew(x-angle,y-angle)Defines a 2D skew transformation along the X- and the Y-axisPlay it »
skewX(angle)Defines a 2D skew transformation along the X-axisPlay it »
skewY(angle)Defines a 2D skew transformation along the Y-axisPlay it »
perspective(n)Defines a perspective view for a 3D transformed element
initialSets this property to its default value. Read about initial
inheritInherits 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.

голоса
Рейтинг статьи
Читайте так же:
Регулировка яркости лампы накаливания своими руками
Ссылка на основную публикацию
ВсеИнструменты
Adblock
detector