マーキースクロールdivで回転divを

Question

私はhtmlとcssを使い慣れています。私はいくつかの助けが必要です。マーキーのスクロールをどのように回転するかのコードはすでにありますが、エッジを隠したいと思っています。そう基本的に私は、余分なマーキースクロールアニメーションがあなたのコンテンツをクリップする

<style> 
 

 

 

 
div { 
 
    height: 100px; 
 
    width: 700px; 
 
    -ms-transform: rotate(-30deg); /* IE 9 */ 
 
    -webkit-transform: rotate(-30deg); /* Safari */ 
 
    transform: rotate(-30deg); /* Standard syntax */ 
 
​ 
 
    
 
} 
 
    
 
</style> 
 

 
<div> 
 
    
 
<marquee behavior="alternate" direction="left"> Hello world Hello world Hello worldHello worldHello worldHello worldHello worldHello worldHello worldHello worldHello worldHello worldHello world 
 

 
    </marquee> 
 
    
 
    <marquee behavior="alternate" direction="left"> Hello world Hello world Hello worldHello worldHello worldHello worldHello worldHello worldHello worldHello worldHello worldHello worldHello world 
 

 
    </marquee> 
 
    <marquee behavior="alternate" direction="left"> Hello world Hello world Hello worldHello worldHello worldHello worldHello worldHello worldHello worldHello worldHello worldHello worldHello world 
 

 
    </marquee> 
 
    <marquee behavior="alternate" direction="left"> Hello world Hello world Hello worldHello worldHello worldHello worldHello worldHello worldHello worldHello worldHello worldHello worldHello world 
 

 
    </marquee> 
 
    <marquee behavior="alternate" direction="left"> Hello world Hello world Hello worldHello worldHello worldHello worldHello worldHello worldHello worldHello worldHello worldHello worldHello world 
 

 
    </marquee><marquee behavior="alternate" direction="left"> Hello world Hello world Hello worldHello worldHello worldHello worldHello worldHello worldHello worldHello worldHello worldHello worldHello world 
 

 
    </marquee> 
 
    
 
    </div>

Answer 1

見えないように、あなたは、コンテナのdiv要素を使用することができ、傾斜していないthatsのdivの内側のタイル張りのマーキースクロールを見て欲しいとoverflow:hiddenを設定します。

.container { 
 
    overflow: hidden; 
 
} 
 
.container div { 
 
    height: 100px; 
 
    width: 700px; 
 
    -ms-transform: rotate(-30deg); 
 
    /* IE 9 */ 
 
    -webkit-transform: rotate(-30deg); 
 
    /* Safari */ 
 
    transform: rotate(-30deg); 
 
}

<div class="container"> 
 
    <div> 
 
    <marquee behavior="alternate" direction="left">Hello world Hello world Hello worldHello worldHello worldHello worldHello worldHello worldHello worldHello worldHello worldHello worldHello world</marquee> 
 
    <marquee behavior="alternate" direction="left">Hello world Hello world Hello worldHello worldHello worldHello worldHello worldHello worldHello worldHello worldHello worldHello worldHello world</marquee> 
 
    <marquee behavior="alternate" direction="left">Hello world Hello world Hello worldHello worldHello worldHello worldHello worldHello worldHello worldHello worldHello worldHello worldHello world</marquee> 
 
    <marquee behavior="alternate" direction="left">Hello world Hello world Hello worldHello worldHello worldHello worldHello worldHello worldHello worldHello worldHello worldHello worldHello world</marquee> 
 
    <marquee behavior="alternate" direction="left">Hello world Hello world Hello worldHello worldHello worldHello worldHello worldHello worldHello worldHello worldHello worldHello worldHello world</marquee> 
 
    <marquee behavior="alternate" direction="left">Hello world Hello world Hello worldHello worldHello worldHello worldHello worldHello worldHello worldHello worldHello worldHello worldHello world</marquee> 
 
    </div> 
 
</div>