选框滚动在div中旋转div

Question

我是html和css的新手，我需要一些帮助。我已经有了如何旋转选框滚动的代码，但我想隐藏边缘。所以基本上我希望平铺的选框滚动看里面的div不倾斜，这样额外的选框滚动动画是不可见的

<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并设置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>