CSS transform Property

Description

The transform property allow elements styled with CSS to be transformed in two-dimensional or three-dimensional space. Using this property, elements can be translated, rotated, scaled, and skewed. The value list may consist of 2D and/or 3D transform values.

Initial value
none
Applies to
Transformable elements
Inherited
No
Media
Visual
Computed value
As specified
Animatable
Yes
CSS Version
CSS3
JavaScript syntax
object.style.transform

Syntax

transform: none | <transform-list>

Values

  • matrix(a, b, c, d, e, f)Specifies a 2D transformation matrix in the form of a transformation matrix of the six values, a-f.
  • matrix3d(a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p)Specifies a 3D transformation as a 4x4 homogeneous matrix of 16 values in column-major order.
  • rotate(angle)Specifies a 2D rotation by the specified angle about the origin of the element, as defined by the transform-origin property.
  • rotate3d(x, y, z, a)Specifies a 3D rotation by the angle specified in last parameter about the [x,y,z] direction vector described by the first three parameters.
  • rotateX(ax)Specifies a 3D rotation by the angle specified in the X direction. Equivalent to rotate3d(1, 0, 0, ax).
  • rotateY(ay)Specifies a 3D rotation by the angle specified in the Y direction. Equivalent to rotate3d(0, 1, 0, ay).
  • rotateZ(az)Specifies a 3D rotation by the angle specified in the Z direction. Equivalent to rotate3d(0, 0, 1, az).
  • scale(sx[, sy])Specifies a 2D scaling operation described by [sx, sy]. If sy is not specified, it is assumed to be equal to sx.
  • scale3d(sx, sy, sz)Specifies a 3D scale operation by the [sx,sy,sz] scaling vector described by the three parameters.
  • scaleX(sx)Specifies a scale operation using the vector [sx, 1].
  • scaleY(sy)Specifies a scale operation using the vector [1, sy].
  • scaleZ(sz)Specifies a 3D scale operation by the scaling vector [1,1,sz].
  • skew(ax[, ay])Specifies a 2D skew by [ax,ay] for X and Y. If the second parameter is not provided, it is assumed to be zero.
  • skewX(angle)Specifies a 2D skew transformation along the X axis by the given angle.
  • skewY(angle)Specifies a 2D skew transformation along the Y axis by the given angle.
  • translate(tx[, ty])Specifies a 2D translation by the vector [tx, ty]. If ty is not specified, its value is assumed to be zero.
  • translate3d(tx, ty, tz)Specifies a 3D translation by the vector [tx,ty,tz] in the X, Y, and Z directions.
  • translateX(tx)Translates the element by the given amount along the X axis.
  • translateY(ty)Translates the element by the given amount along the Y axis.
  • translateZ(tz)Specifies a 3D translation by the vector [0,0,tz] in the Z direction.
  • perspective(<length>)Specifies a perspective projection matrix, which scales points in the X and Y directions based on their Z value. Thus, points with positive Z values are scaled away from the origin, and those with negative Z values are scaled toward the origin.
  • noneSpecifies that no transform should be applied.

Example

<h2>2D CSS Conversions</h2> 
<div class="static"><div class="test"> translate (-20px, -20px) </div></div>
<div class="static"><div class="test2"> scaleX (.5) </div></div>
<div class="static"><div class="test3"> scale (0, 0.5) </div></div>
<br>
<div class="static"><div class="test4"> rotate (2turn) </div></div>
<div class="static"><div class="test5"> skewY (20deg) </div></div>
<div class="static"><div class="test6"> matrix (.7,0, .5, .7, -99, -99) </div></div>
.static {
   margin: 10px;
   background: gray;
   display: inline-block; 
} 
div {
   width: 180px;
   height : 100px;
   text-align: center; 
   line-height: 100px;
   transition: .3s linear; 
   -moz-transition: .3s linear;
   -webkit-transition: .3s linear; 
} 
.test2, .test4, .test6 { 
   background: orange;  
}
.test, .test3, .test5 { 
   background: plum;  
} 
.test:hover {
   transform: translate(-20px, -20px);
   -webkit-transform: translate(-20px, -20px); 
   -moz-transform: translate(-20px, -20px); 
   -ms-transform: translate(-20px, -20px);
}  
.test2:hover {
   transform: scaleX(.5);
   -webkit-transform: scaleX(.5);
   -moz-transform: scaleX(.5);
   -ms-transform: scaleX(.5); 
} 
.test3:hover {
   transform: scale(0, 0.5); 
   -webkit-transform: scale(0, 0.5);
   -moz-transform: scale(0, 0.5);
   -ms-transform: scale(0, 0.5); 
}  
.test4:hover {
   transform: rotate(2turn); 
   -webkit-transform: rotate(2turn); 
   -moz-transform: rotate(2turn); 
   -ms-transform: rotate(2turn);
}  
.test5:hover {
   transform: skewY(20deg);
   -webkit-transform: skewY(20deg);
   -moz-transform: skewY(20deg); 
   -ms-transform: skewY(20deg);
}  
.test6:hover {
   transform: matrix(.7,0, .5, .7, -99, -99); 
   -webkit-transform: matrix(.7,0, .5, .7, -99, -99); 
   -moz-transform: matrix(.7,0, .5, .7, -99, -99); 
   -ms-transform: matrix(.7,0, .5, .7, -99, -99); 
}   

Browser Support

Desktop
Explorer Edge Chrome Firefox Opera Safari
10123616239
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
3736162493.0

Last updated by CSSPortal on: 2nd November 2019


CSS Properties

align-content
align-items
align-self
all
animation
animation-delay
animation-direction
animation-duration
animation-fill-mode
animation-iteration-count
animation-name
animation-play-state
animation-timing-function
backface-visibility
background
background-attachment
background-blend-mode
background-clip
background-color
background-image
background-origin
background-position
background-repeat
background-size
border
border-bottom
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-style
border-bottom-width
border-collapse
border-color
border-image
border-image-outset
border-image-repeat
border-image-slice
border-image-source
border-image-width
border-left
border-left-color
border-left-style
border-left-width
border-radius
border-right
border-right-color
border-right-style
border-right-width
border-spacing
border-style
border-top
border-top-color
border-top-left-radius
border-top-right-radius
border-top-style
border-top-width
border-width
bottom
box-decoration-break
box-shadow
box-sizing
break-after
break-before
break-inside
caption-side
caret-color
clear
clip-path
color
column-count
column-fill
column-rule
column-rule-color
column-rule-style
column-rule-width
column-span
column-width
columns
content
counter-increment
counter-reset
counter-set
cursor
direction
display
empty-cells
filter
flex
flex-basis
flex-direction
flex-flow
flex-grow
flex-shrink
flex-wrap
float
font
font-family
font-feature-settings
font-kerning
font-language-override
font-size
font-size-adjust
font-stretch
font-style
font-synthesis
font-variant
font-variant-alternates
font-variant-caps
font-variant-east-asian
font-variant-ligatures
font-variant-numeric
font-variant-position
font-weight
grid
grid-area
grid-auto-columns
grid-auto-flow
grid-auto-rows
grid-column
grid-column-end
grid-column-gap
grid-column-start
grid-gap
grid-row
grid-row-end
grid-row-gap
grid-row-start
grid-template
grid-template-areas
grid-template-columns
grid-template-rows
hanging-punctuation
height
hyphens
image-orientation
justify-content
justify-items
justify-self
left
letter-spacing
line-break
line-height
list-style
list-style-image
list-style-position
list-style-type
margin
margin-bottom
margin-left
margin-right
margin-top
max-height
max-width
min-height
min-width
mix-blend-mode
object-fit
object-position
opacity
order
orphans
outline
outline-color
outline-offset
outline-style
outline-width
overflow
overflow-wrap
overflow-x
overflow-y
padding
padding-bottom
padding-left
padding-right
padding-top
perspective
perspective-origin
place-content
place-items
place-self
position
quotes
resize
right
shape-image-threshold
shape-margin
shape-outside
tab-size
table-layout
text-align
text-align-last
text-combine-upright
text-decoration
text-decoration-color
text-decoration-line
text-decoration-style
text-emphasis
text-emphasis-color
text-emphasis-position
text-emphasis-style
text-indent
text-justify
text-orientation
text-overflow
text-shadow
text-transform
text-underline-position
top
transform
transform-origin
transform-style
transition
transition-delay
transition-duration
transition-property
transition-timing-function
unicode-bidi
vertical-align
visibility
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode
z-index