我无法输入使用透视图过渡的动画图像滑块,但是由于视差效果已经使用了透视规则,因此它完全弄乱了图像滑块。
这是我正在使用的代码。如您所见,包装器显然包裹了所有元素。
<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;
}
有没有一种方法可以使包装器应用于滑块部分,但允许滑块在部分内部设置自己的透视图?
谢谢! -本