Hosting Solutions
mobile_logo Table of Contents
seal_frontseal_back

transform

The CSS transform property comes equipped with functions that manipulate the 2D and 3D display of elements. Authors can apply one or more transform functions to an element by making a space separated list of them. We will demonstrate the entire function list on this page. Authors can also animate these transform effects using the CSS transition property or animation property.

CSS Syntaxtransform: rotate3d( 7, .5, 0, 45deg ) perspective( 1000px );
JavaScript Syntaxelement.style.transform = "rotate3d( 7, .5, 0, 45deg ) perspective( 1000px )";

Value

none - no transforms applied. 2D Functions matrix( 1,0,0,1,0,0 ) translate( length, length ) translateX( length ) translateY( length ) scale( number, number ) scaleX( number ) scaleY( number ) rotate( angle ) skew( angle, angle ) skewX( angle ) skewY( angle ) 3D Functions matrix3d( 1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1 ) translate3d( length, length, length ) translateZ( length ) scale3d( number, number, number ) scaleZ( number ) rotate3d( number, number, number, angle ) rotateX( angle ) rotateY( angle ) rotateZ( angle ) perspective( length )


Initial value: none Animatable: yes see animatable properties CSS level: 3 Web standard: not yet what's this?

CSS Code Example

matrix() - Makes 2D display changes according to a matrix of six numbers. Default matrix setting for an element is matrix( 1,0,0,1,0,0 ). <style> #my_div{ transform: matrix( -1, .5, .3, -1, 100, 150 ); background:#09C; width:200px; height:200px; } </style> <div id="my_div">Element content ...</div> translate() - Translates the position of an element on both the X and Y axis(x, y). If only one value is given for the X axis then the Y axis defaults to 0px. Negative values may be used. #my_div{ transform: translate( 200px, -25px ); background: #B9DCFF; width:200px; height:200px; } translateX() - Translates the position of an element on the X axis. #my_div{ transform: translateX( 300px ); background: #B9DCFF; width:200px; height:200px; } translateY() - Translates the position of an element on the Y axis. #my_div{ transform: translateY( 100px ); background: #B9DCFF; width:200px; height:200px; } scale() - Scales the element along the X and Y axis using positive or negative numbers. Negative numbers will make the element appear to be flipped on the axis where a negative value is used. Default scale setting for an element is ( 1, 1 ). #my_div{ transform: scale( 2, -2 ); background: #B9DCFF; width:200px; height:200px; margin:200px; } scaleX() - Scales the element on the X axis using positive or negative numbers. Default scale setting for an element is ( 1 ). #my_div{ transform: scaleX( 2.5 ); background: #B9DCFF; width:200px; height:200px; margin:200px; } scaleY() - Scales the element on the Y axis using positive or negative numbers. Default scale setting for an element is ( 1 ). #my_div{ transform: scaleY( 1.5 ); background: #B9DCFF; width:200px; height:200px; margin:100px; } rotate() - Rotates an element in 2D space according to specified angle. Negative degrees will make it rotate counter-clockwise. #my_div{ transform: rotate( 90deg ); background: #B9DCFF; width:200px; height:200px; } skew() - Skews an element on both the X and Y axiss according to specified angle. Negative degrees will make it skew into the opposite direction. #my_div{ transform: skew( 45deg, -10deg ); background: #B9DCFF; width:200px; height:200px; } skewX() - Skews an element on the X axis according to specified angle. #my_div{ transform: skewX( 10deg ); background: #B9DCFF; width:200px; height:200px; } skewY() - Skews an element on the Y axis according to specified angle. #my_div{ transform: skewY( 10deg ); background: #B9DCFF; width:200px; height:200px; } matrix3d() - Makes 3D display changes according to a 4 x 4 matrix of 16 numbers. Default matrix3d setting for an element is matrix3d( 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1 ). #my_div{ transform: matrix3d( 1, 0, 0, .001, 0, 1, 0, .002, 0, 0, 1, 0, 100, 100, 0, 1 ); background: #B9DCFF; width:200px; height:200px; } translate3d() - Translates the position of an element in 3D space along the X, Y and Z axis. Elements will appear to zoom in and out when we change the Z axis value. #my_div{ transform: perspective( 1000px ) translate3d( 100px, 100px, -300px ); background: #B9DCFF; width:200px; height:200px; } translateZ() - Translates the position of an element in 3D space along the Z axis only. Elements will appear to zoom in and out when we change the Z axis value. #my_div{ transform: perspective( 1000px ) translateZ( 100px ); background: #B9DCFF; width:200px; height:200px; } scale3d() - Scales the element along the X, Y and Z axis. #my_div{ transform: perspective( 1000px ) scale3d( .5, .5, 3 ) translateZ( 100px ); background: #B9DCFF; width:200px; height:200px; } scaleZ() - Scales the element along the Z axis. #my_div{ transform: perspective( 1000px ) scaleZ( 5 ) translateZ( -100px ); background: #B9DCFF; width:200px; height:200px; } rotate3d() - Rotates an element in 3D space at an angle along the X, Y, and Z axis. rotate3d( x, y, z, angle ). #my_div{ transform: perspective( 1000px ) rotate3d( 7, .5, 0, 45deg ); background: #B9DCFF; width:200px; height:200px; } rotateX() - Rotates an element at an angle in 3D space along its X axis. #my_div{ transform: perspective( 1000px ) rotateX( -45deg ); background: #B9DCFF; width:200px; height:200px; } rotateY() - Rotates an element at an angle in 3D space along its Y axis. #my_div{ transform: perspective( 1000px ) rotateY( 45deg ); background: #B9DCFF; width:200px; height:200px; } rotateZ() - Rotates an element at an angle in 3D space along its Z axis. #my_div{ transform: perspective( 1000px ) rotateZ( 45deg ); background: #B9DCFF; width:200px; height:200px; } perspective() - Sets the viewing perspective origin point for 3D tranformations. 1000px is a moderate perspective and it gets more warped as you decrease this amount. #my_div{ transform: perspective( 1000px ) rotateX( 45deg ); background: #B9DCFF; width:200px; height:200px; }

Animating Tranformations

Animation Technique 1 - transition property

<style> #my_div{ transform: perspective( 1000px ) rotateX( 0deg ); background: #B9DCFF; width:200px; height:200px; transition: transform 0.3s linear 0s; } #my_div:hover{ transform: perspective( 1000px ) rotateY( 45deg ); } </style> <div id="my_div">Element content ...</div>

Animation Technique 2 - animation property

<style> #my_div{ background: #B9DCFF; width:200px; height:200px; animation: my-animation linear 1s infinite; } @keyframes my-animation { 50% { transform: perspective( 1000px ) rotateX( 45deg ); } 100% { transform: perspective( 1000px ) rotateX( 0deg ); } } </style> <div id="my_div">Element content ...</div>

Animation Technique 3 - JavaScript Triggering

The following URL is for a video tutorial that shows how to use JavaScript to call the CSS transition property to run on an element. Very useful for targeting many more user interaction events, Ajax return mechanisms and much more. It allows you to run transitions any time you like in your applications. Trigger CSS3 Transitions With JavaScript to Control Animations

Module

Transforms Module

Official Documentation

http://www.w3.org/TR/css3-transforms/#propdef-transform

CSS

Properties

align contentalign itemsalign selfalignment adjustalignment baselineallanimationanimation delayanimation directionanimation durationanimation fill modeanimation iteration countanimation nameanimation play stateanimation timing functionazimuthbackface visibilitybackgroundbackground attachmentbackground blend modebackground clipbackground colorbackground imagebackground originbackground positionbackground repeatbackground sizebaseline shiftbookmark labelbookmark levelbookmark stateborderborder bottomborder bottom colorborder bottom left radiusborder bottom right radiusborder bottom styleborder bottom widthborder collapseborder colorborder imageborder image outsetborder image repeatborder image sliceborder image sourceborder image widthborder leftborder left colorborder left styleborder left widthborder radiusborder rightborder right colorborder right styleborder right widthborder spacingborder styleborder topborder top colorborder top left radiusborder top right radiusborder top styleborder top widthborder widthbottombox decoration breakbox shadowbox sizingbox snapbox suppressbreak afterbreak beforebreak insidecaption sidecaret colorchainsclearclipclip pathclip rulecolorcolor interpolation filterscolumn countcolumn fillcolumn gapcolumn rulecolumn rule colorcolumn rule stylecolumn rule widthcolumn spancolumn widthcolumnscontentcounter incrementcounter resetcounter setcropcuecue aftercue beforecursordirectiondisplaydisplay insidedisplay listdisplay outsidedominant baselinedrop initial after adjustdrop initial after aligndrop initial before adjustdrop initial before aligndrop initial sizedrop initial valueelevationempty cellsfilterflexflex basisflex directionflex flowflex growflex shrinkflex wrapfloatflood colorflood opacityflow fromflow intofontfont familyfont feature settingsfont kerningfont language overridefont sizefont size adjustfont stretchfont stylefont synthesisfont variantfont variant alternatesfont variant capsfont variant east asianfont variant ligaturesfont variant numericfont variant positionfont weightfootnote displayfootnote policygridgrid areagrid auto columnsgrid auto flowgrid auto rowsgrid columngrid column endgrid column startgrid rowgrid row endgrid row startgrid templategrid template areasgrid template columnsgrid template rowshanging punctuationheighthyphensimage orientationimage resolutioninitial letterinitial letter aligninline box alignisolationjustify contentjustify itemsjustify selfleftletter spacinglighting colorline breakline gridline heightline snapline stackingline stacking rubyline stacking shiftline stacking strategylist stylelist style imagelist style positionlist style typemarginmargin bottommargin leftmargin rightmargin topmarker sidemarquee directionmarquee loopmarquee speedmarquee stylemaskmask bordermask border modemask border outsetmask border repeatmask border slicemask border sourcemask border widthmask clipmask compositemask imagemask modemask originmask positionmask repeatmask sizemask typemax heightmax linesmax widthmax zoommin heightmin widthmin zoommix blend modemove tonav downnav leftnav rightnav upobject fitobject positionoffset afteroffset beforeoffset endoffset startopacityorderorientationorphansoutlineoutline coloroutline offsetoutline styleoutline widthoverflowoverflow styleoverflow wrapoverflow xoverflow ypaddingpadding bottompadding leftpadding rightpadding toppagepage break afterpage break beforepage break insidepage policypausepause afterpause beforeperspectiveperspective originpitchpitch rangeplay duringpositionpresentation levelquotesregion fragmentresizeresolutionrestrest afterrest beforerichnessrightrotationrotation pointruby alignruby mergeruby positionrunningshape image thresholdshape marginshape outsidesizespeakspeak asspeak headerspeak numeralspeak punctuationspeech ratestressstring settab sizetable layouttext aligntext align lasttext combine uprighttext decorationtext decoration colortext decoration linetext decoration skiptext decoration styletext emphasistext emphasis colortext emphasis positiontext emphasis styletext heighttext indenttext justifytext orientationtext overflowtext shadowtext transformtext underline positiontoptransformtransform origintransform styletransitiontransition delaytransition durationtransition propertytransition timing functionunicode bidiuser zoomvertical alignvisibilityvoice balancevoice durationvoice familyvoice pitchvoice rangevoice ratevoice stressvoice volumevolumewhite spacewidowswidthwill changeword breakword spacingword wrapwrap flowwrap throughwriting modez indexzoom