円（360deg）円内のテキストマーキーアニメーションdiv

Question

div内に回転するテキストを使用することは可能でしょうか？

<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> 

おかげ

Answer 1

チェックアウトthis fiddle。 （つまり、レイアウトのあなたの一般的な手段に依存します。）けれどもあなたは、正しくテキストを整列させる必要があります

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); } 
}