dongzhuang5741 2018-12-24 06:34
浏览 65

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

I have my parent div with transformed 3d with rotation, where the parent div moves to the backside, I have my child div which contains a button that is not clickable because of the parent div. If i set backface-visibility to hidden, the access to child element is also prevented in chrome browser. In the code provided below, the button in inaccessible, I have given the cursor property as pointer and it works only for half part of the button where it falls under 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>

</div>
  • 写回答

1条回答 默认 最新

  • doupeng8419 2018-12-24 08:17
    关注

    You need to change the following CSS, this allows you to click the button but does not affect your design. Let me know if you needed something else. N.B. be aware you have declared the background twice in your .button_container CSS class.

    .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>

    </div>
    评论

报告相同问题？

悬赏问题

  • ¥15 微信会员卡等级和折扣规则
  • ¥15 微信公众平台自制会员卡可以通过收款码收款码收款进行自动积分吗
  • ¥15 随身WiFi网络灯亮但是没有网络，如何解决？
  • ¥15 gdf格式的脑电数据如何处理matlab
  • ¥20 重新写的代码替换了之后运行hbuliderx就这样了
  • ¥100 监控抖音用户作品更新可以微信公众号提醒
  • ¥15 UE5 如何可以不渲染HDRIBackdrop背景
  • ¥70 2048小游戏毕设项目
  • ¥20 mysql架构，按照姓名分表
  • ¥15 MATLAB实现区间[a,b]上的Gauss-Legendre积分