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 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

<style>
    .btn1{ transform:rotateZ(45deg)}
</style>
        
    <Button class="btn1">Button 1</Button>
        

<style>
    .btn2{ transform:rotateZ(180deg)}
</style>
        
    <Button class="btn2">Button 2</Button>
        

<style>
    .btn3{ transform:rotateX(180deg)}
</style>
        
    <Button class="btn3">Button 3</Button>
        

<style>
    .btn4{ transform:rotateX(45deg)}
</style>
        
    <Button class="btn4">Button 4</Button>
        

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

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

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)

<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 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)

<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 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)

<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 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 Properties

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

<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>