问题描述
我正在尝试使用输入/标签的组合来创建一个 3D 动画滑块来触发点击转换,但它在 Mozilla firefox 中不起作用。
它在 Chrome 中运行良好,但在 Mozilla 中,当我点击时,卡片之间没有过渡
https://codepen.io/panfilov/pen/GogJVy
* {
margin: 0;
padding: 0;
}
body {
padding: 20px;
background: #eee;
user-select: none;
}
[type=radio] {
display: none;
-webkit-perspective:1000px; -moz-perspective:1000px;
}
#slider {
height: 35vw;
position: relative;
perspective: 1000px;
transform-style: preserve-3d;
-moz-perspective: 1000px;
-moz-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;
-moz-transition: transform 0.4s ease;
}
#s1:checked ~ #slide4,#s2:checked ~ #slide5,#s3:checked ~ #slide1,#s4:checked ~ #slide2,#s5:checked ~ #slide3 {
Box-shadow: 0 1px 4px 0 rgba(0,.37);
transform: translate3d(-30%,-200px);
-moz-transform: translate3d(-30%,-200px);
}
#s1:checked ~ #slide5,#s2:checked ~ #slide1,#s3:checked ~ #slide2,#s4:checked ~ #slide3,#s5:checked ~ #slide4 {
Box-shadow: 0 6px 10px 0 rgba(0,.3),0 2px 2px 0 rgba(0,.2);
transform: translate3d(-15%,-100px);
-moz-transform: translate3d(-15%,-100px);
}
#s1:checked ~ #slide1,#s2:checked ~ #slide2,#s3:checked ~ #slide3,#s4:checked ~ #slide4,#s5:checked ~ #slide5 {
Box-shadow: 0 13px 25px 0 rgba(0,0 11px 7px 0 rgba(0,.19);
transform: translate3d(0,0);
-moz-transform: translate3d(0,0);
}
#s1:checked ~ #slide2,#s2:checked ~ #slide3,#s3:checked ~ #slide4,#s4:checked ~ #slide5,#s5:checked ~ #slide1 {
Box-shadow: 0 6px 10px 0 rgba(0,.2);
transform: translate3d(15%,-100px);
-moz-transform: translate3d(15%,-100px);
}
#s1:checked ~ #slide3,#s2:checked ~ #slide4,#s3:checked ~ #slide5,#s4:checked ~ #slide1,#s5:checked ~ #slide2 {
Box-shadow: 0 1px 4px 0 rgba(0,.37);
transform: translate3d(30%,-200px);
-moz-transform: translate3d(30%,-200px);
}
#slide1 { background: #00BCD4 }
#slide2 { background: #4CAF50 }
#slide3 { background: #CDDC39 }
#slide4 { background: #FFC107 }
#slide5 { background: #FF5722 }
<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>
解决方法
在 3D 转换中使用负值时似乎存在问题。改变你的逻辑,只考虑积极的逻辑。因此,与其从 -200px
到 0
,不如从 0
到 200px
* {
margin: 0;
padding: 0;
}
body {
padding: 20px;
background: #eee;
user-select: none;
}
[type=radio] {
display: none;
}
#slider {
height: 30vw;
margin: 10vw auto;
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;
}
#s1:checked ~ #slide4,#s2:checked ~ #slide5,#s3:checked ~ #slide1,#s4:checked ~ #slide2,#s5:checked ~ #slide3 {
box-shadow: 0 1px 4px 0 rgba(0,.37);
transform: translate3d(-30%,0);
}
#s1:checked ~ #slide5,#s2:checked ~ #slide1,#s3:checked ~ #slide2,#s4:checked ~ #slide3,#s5:checked ~ #slide4 {
box-shadow: 0 6px 10px 0 rgba(0,.3),0 2px 2px 0 rgba(0,.2);
transform: translate3d(-15%,100px);
}
#s1:checked ~ #slide1,#s2:checked ~ #slide2,#s3:checked ~ #slide3,#s4:checked ~ #slide4,#s5:checked ~ #slide5 {
box-shadow: 0 13px 25px 0 rgba(0,0 11px 7px 0 rgba(0,.19);
transform: translate3d(0,200px);
}
#s1:checked ~ #slide2,#s2:checked ~ #slide3,#s3:checked ~ #slide4,#s4:checked ~ #slide5,#s5:checked ~ #slide1 {
box-shadow: 0 6px 10px 0 rgba(0,.2);
transform: translate3d(15%,100px);
}
#s1:checked ~ #slide3,#s2:checked ~ #slide4,#s3:checked ~ #slide5,#s4:checked ~ #slide1,#s5:checked ~ #slide2 {
box-shadow: 0 1px 4px 0 rgba(0,.37);
transform: translate3d(30%,0);
}
#slide1 { background: #00BCD4 }
#slide2 { background: #4CAF50 }
#slide3 { background: #CDDC39 }
#slide4 { background: #FFC107 }
#slide5 { background: #FF5722 }
<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>