我正在尝试获得折叠纸效果。
我在页面上做了2张脸。
点击（活动）我希望在折叠后看到纸张的背面。
问题在于页面的正面接缝具有更大的Z指数，因此当它折叠时只能看到背面的一小部分。
我需要返回切片b1和b2，使其在激活时具有大于f2 f3的索引（过渡延迟到接缝自然）。
这是我的代码
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Double Gate Fold</title>
<script>
var front = new Image();
front.src = 'Flyer2pag1.png';
function scaleSize(maxW, maxH, currW, currH){
var ratio = currH / currW;
if(currW >= maxW && ratio <= 1){
currW = maxW;
currH = currW * ratio;
} else if(currH >= maxH && ratio>1){
currH = maxH;
currW = currH / ratio;
}
return [currW, currH];
}
front.onload = function () {
var frontWidth = this.width;
var frontHeight = this.height;
var newSize = scaleSize(1000, 1000, frontWidth, frontHeight);
frontWidth = newSize[0];
frontHeight = newSize[1];
var Dim_View = document.querySelectorAll(".view");
for (var i = 0; i < Dim_View.length; i++) {
Dim_View[i].style.width = frontWidth + "px";
Dim_View[i].style.height = frontHeight + "px";
}
var Dim_Slice = document.querySelectorAll(".slice");
for (var i = 0; i < Dim_Slice.length; i++) {
Dim_Slice[i].style.width = frontWidth / 4 + "px";
}
var Poz_f1 = document.querySelectorAll(".f1");
for (var i = 0; i < Poz_f1.length; i++) {
Poz_f1[i].style.backgroundPositionX = '0px';
Poz_f1[i].style.backgroundPositionY = '0px';
}
var Poz_f2 = document.querySelectorAll(".f2");
for (var i = 0; i < Poz_f2.length; i++) {
Poz_f2[i].style.backgroundPositionX = +frontWidth * 0.75 + "px";
Poz_f2[i].style.backgroundPositionY = '0px';
}
var Poz_f3 = document.querySelectorAll(".f3");
for (var i = 0; i < Poz_f3.length; i++) {
Poz_f3[i].style.backgroundPositionX = +frontWidth * 0.5 + "px";
Poz_f3[i].style.backgroundPositionY = '0px';
}
var Poz_f4 = document.querySelectorAll(".f4");
for (var i = 0; i < Poz_f4.length; i++) {
Poz_f4[i].style.backgroundPositionX = +frontWidth * 0.25 + "px";
Poz_f4[i].style.backgroundPositionY = '0px';
}
}
var back = new Image();
back.src = 'Flyer2pag2.png';
back.onload = function () {
var backWidth = this.width;
var backHeight = this.height;
var newSize = scaleSize(1000, 1000, backWidth, backHeight);
backWidth = newSize[0];
backHeight = newSize[1];
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
canvas.width = backWidth;
canvas.height = backHeight;
context.translate(canvas.width / 2, canvas.height / 2);
context.scale(-1, 1);
context.drawImage(back, -back.width / 2, -back.height / 2);
context.restore();
context.save();
setTimeout(function () {
var dataURL = canvas.toDataURL();
console.log(dataURL);
var Poz_b1 = document.querySelectorAll(".b1");
for (var i = 0; i < Poz_b1.length; i++) {
Poz_b1[i].style.backgroundPositionX = '0px';
Poz_b1[i].style.backgroundPositionY = '0px';
Poz_b1[i].style.backgroundImage = "url('" + dataURL + "')";
}
var Poz_b2 = document.querySelectorAll(".b2");
for (var i = 0; i < Poz_b2.length; i++) {
Poz_b2[i].style.backgroundPositionX = +backWidth * 0.75 + "px";
Poz_b2[i].style.backgroundPositionY = '0px';
Poz_b2[i].style.backgroundImage = "url('" + dataURL + "')";
}
var Poz_b3 = document.querySelectorAll(".b3");
for (var i = 0; i < Poz_b3.length; i++) {
Poz_b3[i].style.backgroundPositionX = +backWidth * 0.5 + "px";
Poz_b3[i].style.backgroundPositionY = '0px';
Poz_b3[i].style.backgroundImage = "url('" + dataURL + "')";
}
var Poz_b4 = document.querySelectorAll(".b4");
for (var i = 0; i < Poz_b3.length; i++) {
Poz_b4[i].style.backgroundPositionX = +backWidth * 0.25 + "px";
Poz_b4[i].style.backgroundPositionY = '0px';
Poz_b4[i].style.backgroundImage = "url('" + dataURL + "')";
}
}, 100);
}
</script>
<style>
.view {
position:absolute;
margin-left: 300px;
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
-ms-perspective: 1000px;
perspective: 1000px;
}
.slice {
position:absolute;
background: #ffffff;
height: 100%;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
-ms-transform-origin: left center;
transform-origin: left center;
-webkit-transition: -webkit-transform 1s ease-in-out;
-moz-transition: -moz-transform 1s ease-in-out;
-o-transition: -o-transform 1s ease-in-out;
-ms-transition: -ms-transform 1s ease-in-out;
transition: transform 1s ease-in-out;
-webkit-backface-visibility: hidden;
-o-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
}
.view f1, .view .f2, .view .f3, .view .f4 {
-webkit-transform: translate3d(100%,0,0);
-moz-transform: translate3d(100%,0,0);
-o-transform: translate3d(100%,0,0);
-ms-transform: translate3d(100%,0,0);
transform: translate3d(100%,0,0);
}
.view .b2, .view .b3, .view .b4 {
-webkit-transform: translate3d(100%,0,0);
-moz-transform: translate3d(100%,0,0);
-o-transform: translate3d(100%,0,0);
-ms-transform: translate3d(100%,0,0);
transform: translate3d(100%,0,0);
}
.b1, .b2, .b3, .b4 {
-webkit-backface-visibility: visible;
-o-backface-visibility: visible;
-ms-backface-visibility: visible;
backface-visibility: visible;
}
/*********************************************
Folding Front
*********************************************/
.RF:active .f1 {
-webkit-transform: translate3d(100%,0,0) rotate3d(0,1,0,150deg);
-moz-transform: translate3d(100%,0,0) rotate3d(0,1,0,150deg);
-o-transform: translate3d(100%,0,0) rotate3d(0,1,0,150deg);
-ms-transform: translate3d(100%,0,0) rotate3d(0,1,0,150deg);
transform: translate3d(100%,0,0) rotate3d(0,1,0,150deg);
}
.RF:active .f2 {
z-index:-5;
-webkit-transform: translate3d(100%,0,0) rotate3d(0,1,0,-110deg);
-moz-transform: translate3d(100%,0,0) rotate3d(0,1,0,-110deg);
-o-transform: translate3d(100%,0,0) rotate3d(0,1,0,-110deg);
-ms-transform: translate3d(100%,0,0) rotate3d(0,1,0,-110deg);
transform: translate3d(100%,0,0) rotate3d(0,1,0,-110deg);
}
.RF:active .f3 {
z-index:-5;
-webkit-transform: translate3d(100%,0,0) rotate3d(0,1,0,-50deg);
-ms-transform: translate3d(100%,0,0) rotate3d(0,1,0,-50deg);
-o-transform: translate3d(100%,0,0) rotate3d(0,1,0,-50deg);
-moz-transform: translate3d(100%,0,0) rotate3d(0,1,0,-50deg);
transform: translate3d(100%,0,0) rotate3d(0,1,0,-50deg);
}
.RF:active .f4 {
-webkit-transform: translate3d(100%,0,0) rotate3d(0,1,0,-120deg);
-moz-transform: translate3d(100%,0,0) rotate3d(0,1,0,-120deg);
-ms-transform: translate3d(100%,0,0) rotate3d(0,1,0,-120deg);
-o-transform: translate3d(100%,0,0) rotate3d(0,1,0,-120deg);
transform: translate3d(100%,0,0) rotate3d(0,1,0,-120deg);
}
.RF:active .b1 {
-webkit-transform: translate3d(100%,0,0) rotate3d(0,1,0,150deg);
-moz-transform: translate3d(100%,0,0) rotate3d(0,1,0,150deg);
-o-transform: translate3d(100%,0,0) rotate3d(0,1,0,150deg);
-ms-transform: translate3d(100%,0,0) rotate3d(0,1,0,150deg);
transform: translate3d(100%,0,0) rotate3d(0,1,0,150deg);
z-index:5000;
}
.RF:active .b2 {
-webkit-transform: translate3d(100%,0,0) rotate3d(0,1,0,-110deg);
-moz-transform: translate3d(100%,0,0) rotate3d(0,1,0,-110deg);
-o-transform: translate3d(100%,0,0) rotate3d(0,1,0,-110deg);
-ms-transform: translate3d(100%,0,0) rotate3d(0,1,0,-110deg);
transform: translate3d(100%,0,0) rotate3d(0,1,0,-110deg);
}
.RF:active .b3 {
-webkit-transform: translate3d(100%,0,0) rotate3d(0,1,0,-50deg);
-ms-transform: translate3d(100%,0,0) rotate3d(0,1,0,-50deg);
-o-transform: translate3d(100%,0,0) rotate3d(0,1,0,-50deg);
-moz-transform: translate3d(100%,0,0) rotate3d(0,1,0,-50deg);
transform: translate3d(100%,0,0) rotate3d(0,1,0,-50deg);
}
.RF:active .b4 {
-webkit-transform: translate3d(100%,0,0) rotate3d(0,1,0,-120deg);
-moz-transform: translate3d(100%,0,0) rotate3d(0,1,0,-120deg);
-ms-transform: translate3d(100%,0,0) rotate3d(0,1,0,-120deg);
-o-transform: translate3d(100%,0,0) rotate3d(0,1,0,-120deg);
transform: translate3d(100%,0,0) rotate3d(0,1,0,-120deg);
z-index: 5000;
}
</style>
</head>
<body>
<div class="RB">
<!--<img src="https://cdn0.iconfinder.com/data/icons/huge-basic-icons-part-3/512/Rotate_3d.png " />-->
<p>RB</p>
<div class="RF">
<!--<img src="https://cdn0.iconfinder.com/data/icons/huge-basic-icons-part-3/512/Rotate_3d.png" />-->
<p>RF</p>
<div class="view">
<div class=" slice b1" style="background-size: cover;">
<div class="slice b2" style="background-size: cover;">
<div class="slice b3" style="background-size: cover;">
<div class="slice b4" style="background-size: cover;">
</div>
</div>
</div>
</div>
</div>
<div class="view">
<div class=" slice f1" style="background-image: url(Flyer2pag1.png); background-size: cover;">
<div class="slice f2 " style="background-image: url(Flyer2pag1.png); background-size: cover;">
<div class="slice f3 " style="background-image: url(Flyer2pag1.png); background-size: cover; ">
<div class="slice f4 " style="background-image: url(Flyer2pag1.png); background-size: cover; ">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<canvas id="myCanvas" style="background:#0094ff;display:none;"></canvas>
</body>
</html>
答案 0 :(得分：0)
据我所知，问题在于z-indexs的运行方式并不像你期望的那样。我怀疑这是因为你控制了每个孩子的z-index。即'f＆＃39;的孩子指数高于“b＆＃39;”的孩子。但是孩子们在＆＃39; f＆＃39;仍然落后或不覆盖＆＃39; b＆＃39;容器
这是因为在那个级别你需要在浏览页面时将z-index应用于父容器。这里有一个例子可以解释比我的rambling好一点：
<div id="top-parent">
<div class="pages b">
<div class="b1">
content
</div>
</div>
<div class="pages f">
<div class="f1">
content
</div>
</div>
</div>
#top-parent {
height: 300px;
width: 300px;
background: grey;
}
.pages {
position: absolute;
height: 100px;
width: 100px;
}
.pages.b {
position: absolute;
top: 50px;
left: 50px;
z-index: 10;
}
.pages.f {
position: absolute;
z-index: 1;
}
.b1 {
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
background: #eee;
}
/**
* notice that the nested elements don't interact with each other
* the grey page is still above the white page even though the white
* page has a higher z-index. This is because at the level in which they are
* visually interacting, the parent container `.pages.b` is has a higher z-index
* than the parent container `.pages.f`
*/
.f1 {
position: absolute;
z-index: 100000;
width: 100%;
height: 100%;
background: white;
}