Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to use transform-rotate property in CSS3?

    • 0
    • 1
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 470
    Comment on it

    <!DOCTYPE html>
    <html>
    <head><title>css3</title>
    <style>
    div
    {
    width:200px;
    height:200px;
    margin:80px;
    background-color:#000000;
    /* Rotate div */
    transform:rotate(60deg);
    -ms-transform:rotate(60deg);
    -webkit-transform:rotate(60deg);
    -o-transform:rotate(60deg);
    -moz-transform:rotate(60deg);
    }
    </style>
    </head>
    <body>
    <div ><span style="color: #fff; font-size:20px;">Hello, India</span></div>
    </body>
    </html>


    The transform property applies a 2D or 3D transformation to an element. This property allows you to rotate, scale, move, skew, etc., elements.CSS transformations allow us to rotate elements in 2D space according to specified angle. Negative degrees will make it rotate counter-clockwise.

    Syntax: transform: rotate(angle);
    Rotates clockwise from current position.

    The CSS property is denoted as Mozilla-only with the "-moz" prefix.
    Syntax: -moz-transform:rotate(angle);

    The CSS property is denoted as WebKit(Safari and Chrome) with the "-webkit" prefix.
    Syntax: -webkit-transform:rotate(angle);

    Opera uses its standard o- prefixed property to signal the transform.
    Syntax: -o-transform:rotate(angle);

    Microsoft has implemented a -ms prefix for the transform:
    Syntax: -ms-transform:rotate(angle);

 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: