проблема с проблемой перекрытия Div flip

ProgramBox

проблема с проблемой перекрытия Div flip

Post author:admin
Запись опубликована:17 марта, 2023
Post category:Вопросы по программированию

#javascript #jquery #html #css

#javascript #jquery #HTML #css

Вопрос:

У меня есть два разных варианта переключения 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, он перевернулся идеально, но второй div отображается поверх перевернутого первого div. но перевернутый div должен быть поверх второго div.

Ответ №1:

Нижний флип vflipper1 перекрывает верхний из-за того, что вы расположили исходные элементы относительно, а затем расположили перевернутые версии абсолютно внутри них. Итак, поскольку высота первых непереключенных divs меньше, чем перевернутых версий, они будут отображаться как перекрывающиеся, поскольку перевернутый начинается в верхней части непереключенного для второго.

Обратите внимание, что происходит, когда вы настраиваете высоту разделов #newTab и #model на 150 пикселей, а не на 50 пикселей (высота перевернутых версий). Это позволит правильно выстроить вещи.

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

1. : — Здесь проблема в том, что когда я уменьшаю высоту и переворачиваю первый div, он переворачивается, но второй div отображается поверх перевернутого div. Здесь моя проблема в том, что когда я перевернул первый div, перевернутый div должен быть поверх второго div (который не перевернут). и то же действие должно быть и для второго div.