Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to rotate in CSS3 around its axis

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 409
    Comment on it

    Hello, readers, this is a small blog on how to rotate in CSS3 around its axis. To achieve this we will make a file index.html. Copy the below-written code in this file.

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Rotation around its axis</title>
    
    <link rel="stylesheet" type="text/css" href="style.css">
     </head>
    
    
    <body>
    
    <div class="wrapper-x">S</div>
    <div class="wrapper-y">S</div>
    
    </body>
    
    </html>

     

    Next, we will make style.css and copy the below written below.

    .wrapper-x
    {  
    position: absolute;  
    left: 45%;  
    top:30%;
    font-size:90px;  
    -webkit-animation: spinX 5s infinite;
    
    }
    
    
    .wrapper-y
    {  
    position: absolute;  
    left: 45%;  
    top:30%;
    width:50px;
    font-size:90px;  
    -webkit-animation: spinY 5s infinite;  
    
    }
    
    
    @-webkit-keyframes spinX
    {  
    0%   {-webkit-transform: rotateX(0deg); -webkit-transform-origin: 0% 50% 0;}  
    100% {-webkit-transform: rotateX(360deg); -webkit-transform-origin: 0% 50% 0;}  
    }
    
    
    @-webkit-keyframes spinY
    {  
    0%   {-webkit-transform: rotateY(0deg); -webkit-transform-origin: 0% 0% 5;}  
    100% {-webkit-transform: rotateY(360deg); -webkit-transform-origin: 0% 0% 5;}  
    } 

     

    Comment: Transforms have a "transform-origin" property. When transform origin is not specified, it is automatically set at (50%, 50%) of the element. The 0% and 100% represent your "from" and "to" clauses, this allows you to add a number of lines as you wish to increment the movement over your specified timeframe.

     

    Note:-The transform property supports  all latest version of Safari 3.2+, Chrome 4+
    , Firefox 3.5+, Opera 10.5+, and IE 9.

 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: