如何知道渲染哪个div以及如何获取div的子元素?

问题描述 投票:-1回答:1

plz checkout the link

在这里,我有6个孩子div的div。现在我的要求是知道立方体的哪一面显示。

我试图找到div是否在视口中。如果它在视口中,那么我通过使用childElementCount获取该div的子元素。但结束时没有回答。

_roll() {
  var cube = this._root.getElementById('cube');
  var min = 1;
  var max = 24;
  var xRand = this._getRandom(max, min);
  var yRand = this._getRandom(max, min);
  cube.style.webkitTransform = 'rotateX(' + xRand + 'deg) rotateY(' + yRand + 'deg)';
  cube.style.transform = 'rotateX(' + xRand + 'deg) rotateY(' + yRand + 'deg)';
}
.container {
  width: 150px;
  height: 150px;
  position: relative;
  margin: 0 auto 40px;
  perspective: 1000px;
  perspective-origin: 50% 100%
}

#cube {
  width: 100%;
  height: 100%;
  top: 100px;
  position: absolute;
  transform-style: preserve-3d;
  transition: transform 6s;
}

#cube:hover {
  cursor: pointer;
}

#cube div {
  background: #aa0000;
  display: block;
  position: absolute;
  width: 150px;
  height: 55px;
  padding: 48px 0px;
}

#cube .front {
  transform: translateZ(75px);
}

#cube .back {
  transform: rotateX(-180deg) translateZ(75px);
}

#cube .right {
  transform: rotateY(90deg) translateZ(75px);
}

#cube .left {
  transform: rotateY(-90deg) translateZ(75px);
}

#cube .top {
  transform: rotateX(90deg) translateZ(75px);
}

#cube .bottom {
  transform: rotateX(-90deg) translateZ(75px);
}

.dot {
  display: block;
  position: absolute;
  width: 25px;
  height: 25px;
  background: #fff;
  border-radius: 15px;
}

.front .dot1 {
  top: 62px;
  left: 62px;
}

.back .dot1 {
  top: 12px;
  left: 12px;
}

.back .dot2 {
  top: 112px;
  left: 108px;
}

.right .dot1 {
  top: 12px;
  left: 12px;
}

.right .dot2 {
  top: 62px;
  left: 62px;
}

.right .dot3 {
  top: 112px;
  left: 108px;
}
<section class="container">
  <div id="cube" onclick="${e => this._roll()}">
    <div class="front">
      <span class="dot dot1"></span>
    </div>
    <div class="back">
      <span class="dot dot1"></span>
      <span class="dot dot2"></span>
    </div>
    <div class="right">
      <span class="dot dot1"></span>
      <span class="dot dot2"></span>
      <span class="dot dot3"></span>
    </div>
  </div>
</section>
javascript html css
1个回答
1
投票

我认为给你一个明确的前瞻性答案是很复杂的,因为在你开始时你应该滚动到一个特殊的面孔而不是一定程度。

无论如何,我唯一能想到的就是将每次点击重新调整到基础。然后你可以创建一个const数组来保存每个面的位置(度),然后你随机得到数组的一个关键字。

const arr = {'front' : [1260, 90], 'back' : [1350, 720] ... } ;
var rand = getRandFace();//'front' or 'back' ...;
//then you apply the values from `arr[rand]`.
cube.style.transform = 'rotateX(' + arr[rand][0] + 'deg) rotateY(' + arr[rand][1]+ 'deg)';

在下一次单击时,您可以休息多维数据集度(现在为1),但是您应该在没有动画的情况下重置位置。抱歉。但我认为你需要改写它。

有一种方法可以实现它,但是它非常复杂。

© www.soinside.com 2019 - 2024. All rights reserved.