Question

我有一个有两边的立方体（正面，右边），当我在-90deg上旋转сube时，右边变得不可用（无法选择文字，无法点击按钮）），但是如果我在-90.1deg上旋转，则右侧变为可用。为什么会发生这种情况？我该如何解决？

body{perspective-origin:600px;}
    
.cube{
  transform-style:preserve-3d;
  transform:rotateY(-90deg); /*not work*/
}

.side{
  position:absolute;
  border:1px solid red;
  width:200px;
  height:200px
}

.front-side{transform:translateZ(100px);}
.right-side{transform:translateX(100px) rotateY(90deg);}

<body>
  <div class="cube">
    <div class="side front-side">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, deleniti.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat nam magni earum quas consectetur, rerum in aliquam illo perferendis sapiente!</div>
    <div class="side right-side">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore dolor eius corrupti!   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias saepe, doloribus porro nam distinctio culpa accusamus delectus harum nostrum provident.</div>
  </div>
</body>

Answer 1

cube类已折叠，这就是无法访问子元素的原因。使cube内容具有宽度/高度尺寸和相对位置。

请查看代码段。

var cube = document.querySelector('.cube');
var degree = document.getElementById('degree');
document.getElementById('rotate').addEventListener('input', function() {
  cube.style.transform = 'rotateY(' + this.value + 'deg)';
  degree.innerHTML = this.value + ' deg';
});

body {
  perspective-origin: 600px;
}

.cube {
  transform-style: preserve-3d;
  transform: rotateY(0deg);
  /*not work*/
  position: relative;
  width: 200px;
  height: 200px;
}

.side {
  position: absolute;
  border: 1px solid red;
  width: 100%;
  height: 100%;
}

.front-side {
  transform: translateZ(100px);
}

.right-side {
  transform: translateX(100px) rotateY(90deg);
}

<body>
  <div class="cube">
    <div class="side front-side">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, deleniti.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat nam magni earum quas consectetur, rerum in aliquam illo perferendis sapiente!</div>
    <div class="side right-side">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore dolor eius corrupti! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias saepe, doloribus porro nam distinctio culpa accusamus delectus harum nostrum provident.</div>
  </div>
  <br/>
  <input type="range" value="0" min="0" max="360" step="any" id="rotate" /> <span id="degree">0 deg</span>
</body>

css3三维变换，div变得不可用

1 个答案: