Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • CSS Transform Property

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 310
    Comment on it

    The transform property permits you to visually control an element using transform functions. Such functions are skewing, rotating, translating, or scaling. A transformation effect lets you to change shape, size and position of an  element.

    translate() :- The translate(x, y) function is used to relative positioning, translating, or relocating, an element by x from the left, and y from the top. It moves the elements sideways, or up and down. 

     div{
       -webkit-transform: translate(15px, -15px); 
       -moz-transform: translate(15px, -15px);
       -o-transform: translate(15px, -15px); 
       transform: translate(15px, -15px);
    }
    • translateX() :-  It is used to specify left/right value of an element or div.
    div{
    -webkit-transform: translatex(15px);
      -moz-transform: translatex(15px);
      -o-transform: translatex(15px);
      transform: translatex(15px);
    }
    •  translateY() :-  It is used to specified the top/bottom value of an element or div.
    div {
      -webkit-transform: translatey(-15px); 
      -moz-transform: translatey(-15px); 
      -o-transform: translatey(-15px); 
      transform: translatey(-15px);
    }

     

    scale() :- The scale(w, h) property scales a component by w width and h tallness. In this if one value is declared, the scaling will be relative.

      div {
      -webkit-transform: scale(1.5, 2);
      -moz-transform: scale(1.5, 2);
      -o-transform: scale(1.5, 2);
      transform: scale(1.5, 2);
    }
    • scaleX() :-  Here only width is specified. 

    div{
    -webkit-transform: scalex(0.5); 
      -moz-transform: scalex(0.5); 
      -o-transform: scalex(0.5); 
      transform: scalex(0.5);
    }
    • scaleY() :- Here only height is specied.

     div{
     -webkit-transform: scaley(2);
      -moz-transform: scaley(2);
      -o-transform: scaley(2);
      transform: scaley(2);
    }

    rotate() :-  This function will rotate an element about the point of origin with the angle specified.

    div{
     -webkit-transform: rotate(15deg); 
      -moz-transform: rotate(15deg); 
      -o-transform: rotate(15deg); 
      transform: rotate(15deg)
    }

    skew() :- The skew(x,y) function specifies a skew along the x- axis and y-axis. 

    div{
     -webkit-transform: skew(15deg,  4deg);
      -moz-transform: skew(15deg,  4deg);
      -o-transform: skew(15deg,  4deg);
      transform: skew(15deg,  4deg);
    }
    • skewX() :- Here, only x-axis value is specified.

      div{
     -webkit-transform: skewx(15deg);
      -moz-transform: skewx(15deg);
      -o-transform: skewx(15deg);
      transform: skewx(15deg);
    }
    • skewY() :-  Here, only y-axis value is specified.

      div{
     -webkit-transform: skewy(-6deg); 
      -moz-transform: skewy(-6deg); 
      -o-transform: skewy(-6deg); 
      transform: skewy(-6deg);
    }

     

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: