CODEWITHSUNDEEP
javascriptjquerycss
NET Experts
NET Experts

Reputation: 1536

Rotating (360deg) Text marquee animation inside a circle div

I just want to ask if it is possible to have a rotating text inside a div using? 

<style>
div{
    -moz-border-radius: 50px/50px;
    -webkit-border-radius: 50px 50px;
    border-radius: 80px/80px;;
    border:solid 21px #f00; 
    width:100px;
    height:100px;   
}
</style>

<div>this will rotate 360 deg like marquee</div>

Thanks

Upvotes: 2

Views: 3524

Answers (1)

Alexander Pavlov
Alexander Pavlov

Reputation: 32286

Check out this fiddle. You will have to properly align your text, though (that will depend on your general means of layout.)

CSS:

div{
    -moz-border-radius: 50px/50px;
    -webkit-border-radius: 50px 50px;
    border-radius: 80px/80px;;
    border:solid 21px #f00; 
    width:100px;
    height:100px;
    -webkit-animation: rotation 2s linear infinite;
    -moz-animation: rotation 2s linear infinite;
    -ms-animation: rotation 2s linear infinite;
}

@-webkit-keyframes rotation {
    0%   { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}
@-moz-keyframes rotation {
    0%   { -moz-transform: rotate(0deg); }
    100% { -moz-transform: rotate(360deg); }
}
@-ms-keyframes rotation {
    0%   { -ms-transform: rotate(0deg); }
    100% { -ms-transform: rotate(360deg); }
}

Upvotes: 6

Related Questions