CSS PROPERTIES
Expand All | Collapse All
CSS AT-RULES
Advertisements

CSS3 transform Property

Topic: CSS3 Properties ReferencePrev|Next

Description

The transform CSS property applies a transformation to an element such as translate, rotate, scale etc. in 2D or 3D space.

The following table summarizes the usages context and the version history of this property.

Default value: none
Applies to: Transformable elements
Inherited: No
Animatable: Yes. See animatable properties.
Version: New in CSS3

Syntax

The syntax of the property is given with:

transform: 
[ transform-function ] 1 or more values | none | initial | inherit

The example below shows the transform property in action.

img {
    -webkit-transform: translate(200px, 50px);  /* Chrome, Safari, Opera */
       -moz-transform: translate(200px, 50px);  /* Firefox */
        -ms-transform: translate(200px, 50px);  /* IE 9 */
            transform: translate(200px, 50px);  /* Standard syntax */    
}

Property Values

The following table describes the values of this property.

Value Description
translate(tx,ty) Moves the element by the given amount along the X and Y-axis.
translate3d(tx,ty,tz) Moves the element by the given amount along the X, Y & Z-axis.
translateX(tx) Moves the element by the given amount along the X-axis.
translateY(ty) Moves the element by the given amount along the Y-axis.
translateZ(tz) Moves the element by the given amount along the Z-axis.
rotate(a) Rotates the element by the specified angle around the origin of the element, as defined by the transform-origin property.
rotate3d(x,y,z, a) Rotates the element in 3D space by the angle specified in the last parameter, around the [x,y,z] direction vector.
rotateX(a) Rotates the element by the given angle around the X-axis.
rotateY(a) Rotates the element by the given angle around the Y-axis.
rotateZ(a) Rotates the element by the given angle around the Z-axis.
scale(sx,sy) Scale the width and height of the element up or down by the given amount. The function scale(1,1) has no effect.
scale3d(sx,sy,sz) Scales the element by the given amount along the X, Y and Z-axis. The function scale3d(1,1,1) has no effect.
scaleX(sx) Scales the element along the X-axis.
scaleY(sy) Scales the element along the Y-axis.
scaleZ(sz) Scales the element along the Z-axis.
skew(ax,ay) Skews the element by the given angle along the X and Y-axis.
skewX(ax) Skews the element by the given angle along the X-axis.
skewY(ay) Skews the element by the given angle along the Y-axis.
matrix(n,n,n,n,n,n) Specifies a 2D transformation in the form of a transformation matrix comprised of the six values.
matrix(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n) Specifies a 3D transformation in the form of a 4×4 transformation matrix of 16 values.
perspective(length) Defines a perspective view for a 3D transformed element. In general, as the value of this function increases, the element will appear further away from the viewer.
none Specifies that no transform should be applied.
initial Sets this property to its default value.
inherit If specified, the associated element takes the computed value of its parent element transform property.

Browser Compatibility

The transform property is supported in all major modern browsers.

Browsers Icon

Basic Support—

  • Firefox (2D) 3.5+, (3D) 10+ -moz-, 16+
  • Chrome (2D) 4+, (3D) 12+ -webkit-, 36+
  • Internet Explorer (2D) 9 -ms-, 10+
  • Apple Safari (2D) 3.2+, (3D) 4+ -webkit-
  • Opera (2D) 10.5+ -o-,
    (2D) (3D) 15+ -webkit-, 23+

Further Reading

See tutorial on: CSS3 2D Transforms, CSS3 3D Transforms

Related properties: backface-visibility, perspective, perspective-origin, transform-origin, transform-style.

Advertisements
Bootstrap UI Design Templates Property Marvels - A Leading Real Estate Portal for Premium Properties