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

  • How to rotate in CSS3 around its axis

    @indu.gupta
    Recommendations Offline Message

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 291
    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.

    HTML5 css3 rotation axis transform
    Comment on it

 0 Comment(s)

Sign In
Forgot Password?
                           OR                           
Create an account !!
                           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: