Question

我的父div具有旋转旋转的3d，父div移动到背面，我的子div包含一个由于父div而无法单击的按钮。如果我将backface-visibility设置为隐藏，则在chrome浏览器中也会阻止对子元素的访问。在下面提供的代码中，该按钮不可访问，我将cursor属性指定为指针，并且仅在按钮落在button_container下的按钮的一半内有效

.container {
  width: 100%;
  overflow: hidden;
  z-index: 1;
}

*,
*:before,
*:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.containermain {
  overflow: hidden;
  position: relative;
  height: 100vh;
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
}

.container_child,
.container__child,
.containermain__handle__inner,
.containermain__handle__rotater {
  position: relative;
  height: 100%;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  z-index: 99;
}

.containerchild {
  z-index: 1;
  position: relative;
  height: 100%;
}

.button_container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  background-color: #000;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  z-index: 1000;
  background-color: black;
  transform: rotateX(-240deg) translateZ(127.594px);
}

button {
  position: absolute;
  //left: 3%;
  top: 35%;
  bottom: 0;
  margin-left: -1px;
  cursor: pointer;
  background-color: blue;
  transform: rotateX(-240deg) translateZ(127.594px);
  height: 200px;
  width: 200px;
}

<div class="container">
  <div class="containermain">
    <div class="containerchild" style="perspective: 707.2px;">
      <div class="container_child" style="transform: translateZ(-127.594px);">
        <div class="container__child" style="background-color:gray;opacity:0.5;transform:rotateX(240deg)">

          <div class="button_container">
            <button type="button" onclick="alert('check')" name="button">Click Me</button>

          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <style media="screen">
      .container{
        width: 100%;
        overflow: hidden;
        z-index: 1;
      }
      *, *:before, *:after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }
      .containermain {
        overflow: hidden;
        position: relative;
        height: 100vh;
        font-family: "Open Sans", Helvetica, Arial, sans-serif;
      }
      .container_child, .container__child, .containermain__handle__inner, .containermain__handle__rotater {
        position: relative;
        height: 100%;
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
        z-index: 99;
      }
      .containerchild {
        z-index: 1;
        position: relative;
        height: 100%;
      }
      .button_container {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-size: cover;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        background-color: #000;
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
        z-index: 1000;
        background-color:black;
        transform: rotateX(-240deg) translateZ(127.594px);
      }
      button{
        position: absolute;
        //left: 3%;
        top: 35%;
        bottom: 0;
        margin-left: -1px;
        cursor: pointer;
        background-color: blue;
        transform: rotateX(-240deg) translateZ(127.594px);
        height:200px;
        width:200px;
      }
    </style>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <div class="container">
    <div class="containermain">
        <div class="containerchild" style="perspective: 707.2px;">
          <div class="container_child" style="transform: translateZ(-127.594px);">
            <div class="container__child" style="background-color:gray;opacity:0.5;transform:rotateX(240deg)">

              <div class="button_container">
                <button type="button" onclick="alert('check')" name="button">Click Me</button>

              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

Answer 1

您需要更改以下CSS，这使您可以单击按钮，但不会影响您的设计。让我知道您是否还需要其他东西。 NB 。请注意，您在.button_container CSS类中两次声明了背景。

.button_container {
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
  background-color: none;
}

.container {
  width: 100%;
  overflow: hidden;
  z-index: 1;
}

*,
*:before,
*:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.containermain {
  overflow: hidden;
  position: relative;
  height: 100vh;
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
}

.container_child,
.container__child,
.containermain__handle__inner,
.containermain__handle__rotater {
  position: relative;
  height: 100%;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  z-index: 99;
}

.containerchild {
  z-index: 1;
  position: relative;
  height: 100%;
}

.button_container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
  background-color: none;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  z-index: 1000;
  transform: rotateX(-240deg) translateZ(127.594px);
}

button {
  position: absolute;
  //left: 3%;
  top: 35%;
  bottom: 0;
  margin-left: -1px;
  cursor: pointer;
  background-color: blue;
  transform: rotateX(-240deg) translateZ(127.594px);
  height: 200px;
  width: 200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="containermain">
    <div class="containerchild" style="perspective: 707.2px;">
      <div class="container_child" style="transform: translateZ(-127.594px);">
        <div class="container__child" style="background-color:gray;opacity:0.5;transform:rotateX(240deg)">

          <div class="button_container">
            <button type="button" onclick="alert('check')" name="button">Click Me</button>

          </div>
        </div>
      </div>
    </div>
  </div>
</div>

3d div的父元素可防止子元素悬停或单击

1 个答案: