html - 选取框滚动在 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>