使样式覆盖#wrapper的样式

时间:2019-03-20 02:13:38

标签: html css

我无法输入使用透视图过渡的动画图像滑块,但是由于视差效果已经使用了透视规则,因此它完全弄乱了图像滑块。

这是我正在使用的代码。如您所见,包装器显然包裹了所有元素。

    <main id="wrapper" id="home">
      <section class="section parallax bg1">
        <img class="swift_design_title" src="images/swift_design_title.png" alt="swift_design_title.png">
        <div class="nav">
          <ul>
            <li><a class="active" href="#home">HOME</a></li>
            <li><a href="#portfolio">PORTFOLIO</a></li>
            <li><a href="#about">ABOUT</a></li>
            <li><a href="#contact">CONTACT</a></li>
          </ul>
        </div>
       </section>
          <section class="section static" id="about">
            <img src="images/fg_img_one.png" alt="fg_img_one.png" style="width:100%;">
          </section>
            <section class="section parallax bg2">
            </section>
              <section id="slider">
                <input type="radio" name="slider" id="s1">
                <input type="radio" name="slider" id="s2">
                <input type="radio" name="slider" id="s3" checked>
                <input type="radio" name="slider" id="s4">
                <input type="radio" name="slider" id="s5">
                <label for="s1" id="slide1"></label>
                <label for="s2" id="slide2"></label>
                <label for="s3" id="slide3"></label>
                <label for="s4" id="slide4"></label>
                <label for="s5" id="slide5"></label>
              </section>
    </main>

这是CSS,如您所见,包装器将覆盖滑块使用的Perspective元素,但是我需要将它们同时激活。

.wrapper {
  /* The height needs to be set to a fixed value for the effect to work.
   * 100vh is the full height of the viewport. */
  height: 100vh;
  /* The scaling of the images would add a horizontal scrollbar, so disable x overflow. */
  overflow-x: hidden;
  /* Enable scrolling on the page. */
  overflow-y: auto;
  /* Set the perspective to 2px. This is essentailly the simulated distance from the viewport to transformed objects.*/
  perspective: 3px;
}

#slider {
  height: 35vw;
  position: relative;
  perspective: 1000px;
  transform-style: preserve-3d;
}

#slider label {
  margin: auto;
  width: 60%;
  height: 100%;
  border-radius: 4px;
  position: absolute;
  left: 0; right: 0;
  cursor: pointer;
  transition: transform 0.4s ease;
}

有没有一种方法可以使包装器应用于滑块部分,但允许滑块在部分内部设置自己的透视图?

谢谢! -本

0 个答案:

没有答案