Div翻转重叠问题

时间：2016-09-30 18:08:43

标签： javascript jquery css html5 css3

我有两种不同的div翻转选项。但每一个都与另一个重叠。如何解决它。

＆＃13;
＆＃13; 
$(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(','));
  });
});
＆＃13; 
#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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

预览： -

enter image description here

翻转第一个div（模型）后

enter image description here

这里的问题是，当我翻转第一个Div时，它完全翻转，但第二个div显示在翻转的第一个div的顶部。但翻转的div应位于第二个div的顶部。

1 个答案:

答案 0 :(得分：0)

较低的vflipper1翻盖与顶部翻盖重叠，原因是您相对定位了原始元素，然后将翻转版本放置在那些内。因此，由于第一个未翻录的div的高度小于翻转的版本，因此翻转版本会显示为重叠，因为翻转的开始位于第二个未翻盖的顶部。

注意当你将＃newTab和#model divs的高度调整为150px而不是50px（翻转版本的高度）时会发生什么。这将使事情正确排列。

＆＃13;
＆＃13; 
$(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');
  });
});
＆＃13; 
#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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题