div翻转重叠问题 [英] Issue with div flip overlapping issue

问题描述

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

I have two different div flip options. But each one is overlapping to another one. how to resolve it.

$(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;
}

<br />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><br />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><br />
<br />
<!DOCTYPE html><br />
<html lang="en"><br />
<br />
<head><br />
  <meta charset="UTF-8"><br />
  <title>Title</title><br />
</head><br />
<br />
<body><br />
  <div id="newTab" class="vflipper"><br />
    <div class="vclick vfront"><br />
      <div class="pull-left">Model :</div><br />
      <label id="lbl1"></label><br />
    </div><br />
    <div class="vback "><br />
      <input type="checkbox" class="chk" /><br />
      <label>One</label><br />
      <input type="checkbox" class="chk" /><br />
      <label>Two</label><br />
      <input type="checkbox" class="chk" /><br />
      <label>Three</label><br />
      <input type="checkbox" class="chk" /><br />
      <label>Four</label><br />
      <button type="button" class="vclick btn btn-primary">Save</button><br />
    </div><br />
  </div><br />
  <br><br />
  <div id="model" class="vflipper1"><br />
    <div class="vclick1 vfront1"><br />
      <div class="pull-left">Model :</div><br />
      <label id="lbl2"></label><br />
    </div><br />
    <div class="vback1 "><br />
      <input type="checkbox" class="chk" /><br />
      <label>One</label><br />
      <input type="checkbox" class="chk" /><br />
      <label>Two</label><br />
      <input type="checkbox" class="chk" /><br />
      <label>Three</label><br />
      <input type="checkbox" class="chk" /><br />
      <label>Four</label><br />
      <button type="button" class="vclick1 btn btn-primary">Save</button><br />
    </div><br />
  </div><br />
</body><br />
<br />
</html>

我尝试过：



http://i.stack.imgur.com/2j2j4.png [ ^ ]





http://i.stack.imgur.com/UkH7N.png [ ^ ]

What I have tried:

http://i.stack.imgur.com/2j2j4.png[^]


http://i.stack.imgur.com/UkH7N.png[^]

推荐答案

（ document ）。 ready（ function （）{

(document).ready(function() {

（' .vclick'）。单击（ function （）{

（ this ）。nearest（' 。vflipper'） .toggleClass（' vflip'）;
}）;
}）;

(this).closest('.vflipper').toggleClass('vflip'); }); });

这篇关于div翻转重叠问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！