时间戳

首页 > 解决方案 > 无法弄清楚为什么我的 div 旋转会破坏我的布局

html - 无法弄清楚为什么我的 div 旋转会破坏我的布局

问题描述

我想在我的网页中制作一个水平滚动容器，我尝试使用 csstransform来旋转div容器-90deg，并且也对 div 的子元素进行了相同的旋转90deg以使 dem 看起来正常......但它撕毁了我的整个布局并增加了额外的宽度整体容器div

这是下面的html和css代码

 <section class="section-three">
        <h1>Works</h1>
        <div class="image-slider-wrap">
          <li><a href="#">1</a></li>
          <li><a href="#">2</a></li>
          <li><a href="#">3</a></li>
          <li><a href="#">4</a></li>
          <li><a href="#">5</a></li>
          <li><a href="#">6</a></li>
        </div>
      </section>

CSS

.section-three {
  width: 100%;
  height: 800px;
  background: yellow;
 
  @media screen and (min-width: 44em) {
    padding: 50px 10px 300px 250px;
  }
}


.image-slider-wrap {
  width: 400px;
  height: auto;
  background: red;
  overflow-y: scroll;
  transform: rotate(-90deg);
  position: relative;
  top: -900px;
  transform-origin: left;

  li {
    width: 200px;
    height: 400px;
    background: blue;
    transform: rotate(90deg);
  }
}

我的总体目标是在我上下滚动时实现水平滚动。请任何有更好替代方案或解决方案来帮助我目前的技巧的人都应该提供帮助......提前非常感谢

标签： htmljquerycss

解决方案

推荐阅读