CSS3 Transform

CSS3 Transform property let you rotate, translate, skew or scale an html element. In real world, transform means to change shape or appearence of an element.

Till CSS2, we can only translate an element by using position relative and left, top properties. There was no option to rotate, scale and skew an element. But using css3 transform, any transformation is possible.

Transform Properties

Property Value
Rotate To rotate an element on z-axis, x-axis and y-axis in degrees between 0-359.Transform Rotate
Scale To scale and element in x and y direction. Default scale value is 1 for all elements. Transform Scale
Skew Skew can bend or change angle of an element in x or y aixs. Transform Skew
Translate Translate is used to move an element in x or y direction. Transform Translate
Transform Origin Transform Origin can control the origin of transformed element. Transform Origin



Transform Rotate

Transform Rotate property rotate an element in z, y or x axis. Default angle of rotate is 0deg, and can be changed. Here are three different values of transform rotate. Inside parentheses, value is in deg, exp 90deg, 180 deg etc. Default Transform Origin is center center.

Transform Rotate Properties

  1. transform:rotateZ()
  2. transform:rotateX()
  3. transform:rotateY()

Transform Rotate Examples





Transform Rotate 90 deg in z axis


<style>
    .btn1{ transform:rotateZ(0deg); transition:500ms}
    .btn1:hover{ transform:rotateZ(90deg)}
</style>
        
    <Button class="btn1">Button 1</Button>
        


Transform Rotate 180 deg in z-axis


<style>
    .btn2{ transform:rotateZ(0deg); transition:500ms}
    .btn2:hover{ transform:rotateZ(180deg)}
</style>
        
    <Button class="btn2">Button 2</Button>
        


Transform Rotate 70 deg in x-axis


<style>
    .btn3{ transform:rotateX(0deg); transition:500ms}
    .btn3:hover{ transform:rotateX(70deg)}
</style>
        
    <Button class="btn3">Button 3</Button>
        


Transform Rotate 180 deg in x-axis


<style>
    .btn4{ transform:rotateX(0deg); transition:500ms}
    .btn4:hover{ transform:rotateX(180deg)}
</style>
        
    <Button class="btn4">Button 4</Button>
        


Transform Rotate 90 deg in y-axis


<style>
    .btn5{ transform:rotateY(0deg); transition:500ms}
    .btn5:hover{ transform:rotateY(180deg)}
</style>
        
    <Button class="btn5">Button 5</Button>
        


Transform Rotate 180 deg in y-axis


<style>
    .btn6{ transform:rotateY(0deg); transition:500ms}
    .btn6:hover{ transform:rotateY(180deg)}
</style>
        
    <Button class="btn6">Button 6</Button>
        

Transform Scale

Transform Scale or scale property can scale an element by number in x or y axis. Scale can have one or two properties inside parenthesis. Single value means scale on both x and y axis. And double values means first is scalex and second is scaley.

Like rotate, scale doesn't effect document flow. If you scale a image inside div, image will overflow div, but others element will remain in same position.

Transform Scale Properties

  • scale(x) or scale(x,y)
  • scaleX(x)
  • scaleY(y)

Transform Skew Example




<style>
    .btn1{ transform:scale(1)}
    .btn1:hover{ transform:scale(2)}
    
    .btn2{ transform:scale(1)}
    .btn2:hover{ transform:scale(1,2)}
</style>
        
    <Button class="btn1">Button 1</Button>
    <Button class="btn2">Button 2</Button>
        

Transform Skew

Transform Skew or skew tilt an text or element with angle given in deg. Default skew is skewX. skewY can also be used to tilt in y axis.

Transform Skew Properties

  1. skew(ndeg)
  2. skewX(ndeg)
  3. skewY(ndeg)

Transition Property Example




<style>
    .btn1{ transform:skew(0deg)}
    .btn1:hover{ transform:skew(30deg)}
    
    .btn2{ transform:skew(0deg)}
    .btn2:hover{ transform:skewY(30deg)}
</style>
        
    <Button class="btn1">Button 1</Button>
    <Button class="btn2">Button 2</Button>
        

Transform Translate

Transform Translateor Translate translate or move an element on x or y axis. Value of translate can be in px or %.

Transform Translate Properties

  • translate(npx)
  • translateX(npx)
  • translateY(npx)

Transform Translate Example




<style>
    .btn1{ transform:translate(0px)}
    .btn1:hover{ transform:translate(20px)}
    
    .btn2{ transform:translateY(0px)}
    .btn2:hover{ transform:translateY(20px)}
</style>
        
    <Button class="btn1">Button 1</Button>
    <Button class="btn2">Button 2</Button>

Transform Origin

Transform Origin property change the origin of transformed element. Default Transform origin is center center.

To Rotate a square from center, transform origin should be center center

To Rotate a square from left top, transform origin should be left top, or 0% 0%, or 0px 0px.

To Rotate a square( 100*100) from right top, transform origin should be right top, or 100% 0%, or 100px 0px.

transform origin
Transform Origin

Transform Origin Properties

  • center center (default)
  • left top
  • 0px 0px
  • 0% 0%

Transform Origin Example






<style>
    .btn1{ transform:translate(0px); transform-origin:center center}
    .btn1:hover{ transform:translate(20px)}
    
    .btn2{ transform:translateY(0px); transform-origin:left top}
    .btn2:hover{ transform:translateY(20px)}
</style>
        
    <Button class="btn1">Button 1</Button>
    <Button class="btn2">Button 2</Button>

3d Cube using css3 Transform

1
2
3
4
5
6

Transform are supported in all major browsers like. For IE 9, use -ms- prefix. For IE 8, position relative can be used instead of transform translate.