在这里,我有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>
我认为给你一个明确的前瞻性答案是很复杂的,因为在你开始时你应该滚动到一个特殊的面孔而不是一定程度。
无论如何,我唯一能想到的就是将每次点击重新调整到基础。然后你可以创建一个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),但是您应该在没有动画的情况下重置位置。抱歉。但我认为你需要改写它。
有一种方法可以实现它,但是它非常复杂。