問題がDivフリップオーバーラップ問題

Question

私は2つの異なるdivフリップオプションを持っています。しかし、それぞれが別のものと重なっています。それを解決する方法。

$(document).ready(function() { 
 
    $('.vclick').click(function() { 
 
    $(this).closest('.vflipper').toggleClass('vflip'); 
 
    }); 
 
}); 
 
$(function() { 
 
    $(":checkbox").change(function() { 
 
    var arr = $(":checkbox:checked").map(function() { 
 
     return $(this).next().html(); 
 
    }).get(); 
 
    $("#lbl1").html(arr.join(',')); 
 
    }); 
 
}); 
 
$(document).ready(function() { 
 
    $('.vclick1').click(function() { 
 
    $(this).closest('.vflipper1').toggleClass('vflip1'); 
 
    }); 
 
}); 
 
$(function() { 
 
    $(":checkbox").change(function() { 
 
    var arr = $(":checkbox:checked").map(function() { 
 
     return $(this).next().html(); 
 
    }).get(); 
 
    $("#lbl2").html(arr.join(',')); 
 
    }); 
 
});

#newTab { 
 
    height: 50px; 
 
    width: 100%; 
 
    position: relative; 
 
} 
 
#model { 
 
    height: 50px; 
 
    width: 100%; 
 
    position: relative; 
 
} 
 
.vfront { 
 
    background-color: lightgrey; 
 
} 
 
.vfront1 { 
 
    background-color: lightgrey; 
 
} 
 
.vback { 
 
    background-color: lightblue; 
 
} 
 
.vback1 { 
 
    background-color: lightblue; 
 
} 
 
.vflipper { 
 
    position: absolute; 
 
    perspective: 600px; 
 
    -webkit-perspective: 600px; 
 
    -moz-perspective: 600px; 
 
} 
 
.vflipper1 { 
 
    position: absolute; 
 
    perspective: 600px; 
 
    -webkit-perspective: 600px; 
 
    -moz-perspective: 600px; 
 
} 
 
.vflipper .vfront, 
 
.vflipper .vback { 
 
    -webkit-transform-style: preserve-3d; 
 
    -moz-transform-style: preserve-3d; 
 
    transform-style: preserve-3d; 
 
    -webkit-backface-visibility: hidden; 
 
    -moz-backface-visibility: hidden; 
 
    backface-visibility: hidden; 
 
    -o-transition: transform .6s ease-in-out; 
 
    -moz-transition: transform .6s ease-in-out; 
 
    -webkit-transition: transform .6s ease-in-out; 
 
    transition: transform .6s ease-in-out; 
 
} 
 
.vflipper1 .vfront1, 
 
.vflipper1 .vback1 { 
 
    -webkit-transform-style: preserve-3d; 
 
    -moz-transform-style: preserve-3d; 
 
    transform-style: preserve-3d; 
 
    -webkit-backface-visibility: hidden; 
 
    -moz-backface-visibility: hidden; 
 
    backface-visibility: hidden; 
 
    -o-transition: transform .6s ease-in-out; 
 
    -moz-transition: transform .6s ease-in-out; 
 
    -webkit-transition: transform .6s ease-in-out; 
 
    transition: transform .6s ease-in-out; 
 
} 
 
/* vertical flipping stuff */ 
 

 
.vflipper1 { 
 
    -webkit-transform-origin: 100% center; 
 
    -moz-transform-origin: 100% center; 
 
    -ms-transform-origin: 100% center; 
 
    transform-origin: 100% center; 
 
} 
 
.vflipper1 .vfront1 { 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 0px; 
 
    z-index: 200; 
 
    width: inherit; 
 
    height: inherit; 
 
} 
 
.vflipper1.vflip1 .vfront1 { 
 
    z-index: 900; 
 
    -webkit-transform: rotateX(180deg); 
 
    -moz-transform: rotateX(180deg); 
 
    transform: rotateX(180deg); 
 
} 
 
.vflipper1 .vback1 { 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 0px; 
 
    z-index: 800; 
 
    width: inherit; 
 
    height: 150px; 
 
    -webkit-transform: rotateX(-180deg); 
 
    -moz-transform: rotateX(-180deg); 
 
    transform: rotateX(-180deg); 
 
} 
 
.vflipper1.vflip1 .vback1 { 
 
    z-index: 1000; 
 
    -webkit-transform: rotateX(0deg); 
 
    -moz-transform: rotateX(0deg); 
 
    transform: rotateX(0deg); 
 
} 
 
.vflipper { 
 
    -webkit-transform-origin: 100% center; 
 
    -moz-transform-origin: 100% center; 
 
    -ms-transform-origin: 100% center; 
 
    transform-origin: 100% center; 
 
} 
 
.vflipper .vfront { 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 0px; 
 
    z-index: 200; 
 
    width: inherit; 
 
    height: inherit; 
 
} 
 
.vflipper.vflip .vfront { 
 
    z-index: 900; 
 
    -webkit-transform: rotateX(180deg); 
 
    -moz-transform: rotateX(180deg); 
 
    transform: rotateX(180deg); 
 
} 
 
.vflipper .vback { 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 0px; 
 
    z-index: 800; 
 
    width: inherit; 
 
    height: 150px; 
 
    -webkit-transform: rotateX(-180deg); 
 
    -moz-transform: rotateX(-180deg); 
 
    transform: rotateX(-180deg); 
 
} 
 
.vflipper.vflip .vback { 
 
    z-index: 1000; 
 
    -webkit-transform: rotateX(0deg); 
 
    -moz-transform: rotateX(0deg); 
 
    transform: rotateX(0deg); 
 
} 
 
#lbl { 
 
    display: inline; 
 
} 
 
#lb2 { 
 
    display: inline; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Title</title> 
 
</head> 
 

 
<body> 
 
    <div id="newTab" class="vflipper"> 
 
    <div class="vclick vfront"> 
 
     <div class="pull-left">Model :</div> 
 
     <label id="lbl1"></label> 
 
    </div> 
 
    <div class="vback "> 
 
     <input type="checkbox" class="chk" /> 
 
     <label>One</label> 
 
     <input type="checkbox" class="chk" /> 
 
     <label>Two</label> 
 
     <input type="checkbox" class="chk" /> 
 
     <label>Three</label> 
 
     <input type="checkbox" class="chk" /> 
 
     <label>Four</label> 
 
     <button type="button" class="vclick btn btn-primary">Save</button> 
 
    </div> 
 
    </div> 
 
    <br> 
 
    <div id="model" class="vflipper1"> 
 
    <div class="vclick1 vfront1"> 
 
     <div class="pull-left">Model :</div> 
 
     <label id="lbl2"></label> 
 
    </div> 
 
    <div class="vback1 "> 
 
     <input type="checkbox" class="chk" /> 
 
     <label>One</label> 
 
     <input type="checkbox" class="chk" /> 
 
     <label>Two</label> 
 
     <input type="checkbox" class="chk" /> 
 
     <label>Three</label> 
 
     <input type="checkbox" class="chk" /> 
 
     <label>Four</label> 
 
     <button type="button" class="vclick1 btn btn-primary">Save</button> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

プレビュー： - ひっくり返し最初のdiv（モデル）ここで

後

問題は、最初のDivを反転したときに完全に反転されますが、2番目のdivはフリップされた最初のdivの上に表示されます。反転したdivは2番目のdivの上にあるはずです。

Answer 1

下のvflipper1のフリップは、元の要素を相対的に配置し、フリップされたバージョンをそれらの範囲内に絶対配置しているため、上のものと重なっています。そのため、最初のunflipped divの高さはフリップされたバージョンよりも小さいので、フリップされたdivが2番目のものの上部で開始されてから重ねて表示されます。

#newTabと#model divの高さを50px（フリップされたバージョンの高さ）ではなく150pxに調整するとどうなりますか。これにより、適切に整列させることができます。それでも同じ問題に直面して

$(document).ready(function() { 
 
    $('.vclick1').click(function() { 
 
    $(this).closest('.vflipper1').toggleClass('vflip1'); 
 
    }); 
 

 
    $(":checkbox").change(function() { 
 
    var arr = $(":checkbox:checked").map(function() { 
 
     return $(this).next().html(); 
 
    }).get(); 
 
    $("#lbl2").html(arr.join(',')); 
 
    }); 
 

 
    $(":checkbox").change(function() { 
 
    var arr = $(":checkbox:checked").map(function() { 
 
     return $(this).next().html(); 
 
    }).get(); 
 
    $("#lbl1").html(arr.join(',')); 
 
    }); 
 

 
    $('.vclick').click(function() { 
 
    $(this).closest('.vflipper').toggleClass('vflip'); 
 
    }); 
 
});

#newTab { 
 
    height: 150px; 
 
    width: 100%; 
 
    position: relative; 
 
} 
 
#model { 
 
    height: 150px; 
 
    width: 100%; 
 
    position: relative; 
 
} 
 
.vfront { 
 
    background-color: lightgrey; 
 
} 
 
.vfront1 { 
 
    background-color: lightgrey; 
 
} 
 
.vback { 
 
    background-color: lightblue; 
 
} 
 
.vback1 { 
 
    background-color: lightblue; 
 
} 
 
.vflipper { 
 
    position: absolute; 
 
    perspective: 600px; 
 
    -webkit-perspective: 600px; 
 
    -moz-perspective: 600px; 
 
    height: 150px; 
 
} 
 
.vflipper1 { 
 
    position: absolute; 
 
    perspective: 600px; 
 
    -webkit-perspective: 600px; 
 
    -moz-perspective: 600px; 
 
} 
 
.vflipper .vfront, 
 
.vflipper .vback { 
 
    -webkit-transform-style: preserve-3d; 
 
    -moz-transform-style: preserve-3d; 
 
    transform-style: preserve-3d; 
 
    -webkit-backface-visibility: hidden; 
 
    -moz-backface-visibility: hidden; 
 
    backface-visibility: hidden; 
 
    -o-transition: transform .6s ease-in-out; 
 
    -moz-transition: transform .6s ease-in-out; 
 
    -webkit-transition: transform .6s ease-in-out; 
 
    transition: transform .6s ease-in-out; 
 
} 
 
.vflipper1 .vfront1, 
 
.vflipper1 .vback1 { 
 
    -webkit-transform-style: preserve-3d; 
 
    -moz-transform-style: preserve-3d; 
 
    transform-style: preserve-3d; 
 
    -webkit-backface-visibility: hidden; 
 
    -moz-backface-visibility: hidden; 
 
    backface-visibility: hidden; 
 
    -o-transition: transform .6s ease-in-out; 
 
    -moz-transition: transform .6s ease-in-out; 
 
    -webkit-transition: transform .6s ease-in-out; 
 
    transition: transform .6s ease-in-out; 
 
} 
 
/* vertical flipping stuff */ 
 

 
.vflipper1 { 
 
    -webkit-transform-origin: 100% center; 
 
    -moz-transform-origin: 100% center; 
 
    -ms-transform-origin: 100% center; 
 
    transform-origin: 100% center; 
 
} 
 
.vflipper1 .vfront1 { 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 0px; 
 
    z-index: 200; 
 
    width: inherit; 
 
    height: inherit; 
 
} 
 
.vflipper1.vflip1 .vfront1 { 
 
    z-index: 900; 
 
    -webkit-transform: rotateX(180deg); 
 
    -moz-transform: rotateX(180deg); 
 
    transform: rotateX(180deg); 
 
} 
 
.vflipper1 .vback1 { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    z-index: 800; 
 
    width: inherit; 
 
    height: 150px; 
 
    -webkit-transform: rotateX(-180deg); 
 
    -moz-transform: rotateX(-180deg); 
 
    transform: rotateX(-180deg); 
 
} 
 
.vflipper1.vflip1 .vback1 { 
 
    z-index: 1000; 
 
    -webkit-transform: rotateX(0deg); 
 
    -moz-transform: rotateX(0deg); 
 
    transform: rotateX(0deg); 
 
} 
 
.vflipper { 
 
    -webkit-transform-origin: 100% center; 
 
    -moz-transform-origin: 100% center; 
 
    -ms-transform-origin: 100% center; 
 
    transform-origin: 100% center; 
 
} 
 
.vflipper .vfront { 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 0px; 
 
    z-index: 200; 
 
    width: inherit; 
 
    height: inherit; 
 
} 
 
.vflipper.vflip .vfront { 
 
    z-index: 900; 
 
    -webkit-transform: rotateX(180deg); 
 
    -moz-transform: rotateX(180deg); 
 
    transform: rotateX(180deg); 
 
} 
 
.vflipper .vback { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    z-index: 800; 
 
    width: inherit; 
 
    height: 150px; 
 
    -webkit-transform: rotateX(-180deg); 
 
    -moz-transform: rotateX(-180deg); 
 
    transform: rotateX(-180deg); 
 
} 
 
.vflipper.vflip .vback { 
 
    z-index: 1000; 
 
    -webkit-transform: rotateX(0deg); 
 
    -moz-transform: rotateX(0deg); 
 
    transform: rotateX(0deg); 
 
} 
 
#lbl { 
 
    display: inline; 
 
} 
 
#lb2 { 
 
    display: inline; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<div id="newTab" class="vflipper"> 
 
    <div class="vclick vfront"> 
 
    <div class="pull-left">Model :</div> 
 
    <label id="lbl1"></label> 
 
    </div> 
 
    <div class="vback "> 
 
    <input type="checkbox" class="chk" /> 
 
    <label>One</label> 
 
    <input type="checkbox" class="chk" /> 
 
    <label>Two</label> 
 
    <input type="checkbox" class="chk" /> 
 
    <label>Three</label> 
 
    <input type="checkbox" class="chk" /> 
 
    <label>Four</label> 
 
    <button type="button" class="vclick btn btn-primary">Save</button> 
 
    </div> 
 
</div> 
 

 
<br> 
 

 
<div id="model" class="vflipper1"> 
 
    <div class="vclick1 vfront1"> 
 
    <div class="pull-left">Model :</div> 
 
    <label id="lbl2"></label> 
 
    </div> 
 
    <div class="vback1 "> 
 
    <input type="checkbox" class="chk" /> 
 
    <label>One</label> 
 
    <input type="checkbox" class="chk" /> 
 
    <label>Two</label> 
 
    <input type="checkbox" class="chk" /> 
 
    <label>Three</label> 
 
    <input type="checkbox" class="chk" /> 
 
    <label>Four</label> 
 
    <button type="button" class="vclick1 btn btn-primary">Save</button> 
 
    </div> 
 
</div>