所以有很多与此相关的帖子,但我似乎无法准确确定我的风格出了问题,所以如果你们中的一些人认为这是对以前问题的重复,我深表歉意。
这个问题非常简单:我只是想构建一个随机掷骰子。 js 按预期工作,一切正常。问题是这个立方体看起来很尴尬,我不完全确定为什么。我通常对 CSS 非常熟悉,但我并没有在 3D 变换方面做很多工作,所以我缺乏直觉。如果运行该代码片段,您会发现立方体旋转时并非所有侧面都是光滑的,有些侧面看起来会凹陷,我不确定为什么(特别是 1 和 2 面)。完整的代码在下面的代码片段中:
const rollBtn = document.getElementById('roll');
const sides = ['one', 'two', 'three', 'four', 'five', 'six'];
const output = document.getElementById('dice_output');
let currentClass = '';
const rollDice = () => {
let randomSide = sides[Math.floor(Math.random() * (6) + 1)];
let currentSide = document.getElementById(randomSide);
let generatedSide = `show-${randomSide}`;
if (currentClass) {
output.classList.remove(currentClass);
}
output.classList.add(generatedSide);
currentClass = generatedSide;
}
rollBtn.addEventListener('click', rollDice);
* {
box-sizing: border-box;
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
.container {
width: 80px;
margin: 5% auto;
text-align: center;
}
.stage {
width: 80px;
height: 80px;
perspective: 300px;
}
.btn-container {
width: 80px;
margin: 2% auto;
text-align: center;
}
.the-big-z {
z-index: 1000;
}
.the-die {
width: 80px;
height: 80px;
position: relative;
transform-style: preserve-3d;
transition: all ease .5s;
display: block;
margin-bottom: 5%;
}
.die-side {
width: 80px;
height: 80px;
color: #fff;
background-color: #000;
position: absolute;
text-align: center;
padding-top: 20%;
border: solid 3px teal;
}
#one {
transform: rotateY( 0deg) translateZ(0px);
}
#two {
transform: rotateY( 90deg) translateZ(0px);
}
#three {
transform: rotateY(180deg) translateZ(40px);
}
#four {
transform: rotateY(-90deg) translateZ(40px);
}
#five {
transform: rotateX( 90deg) translateZ(40px);
}
#six {
transform: rotateX(-90deg) translateZ(40px);
}
#dice_output.show-one {
transform: translateZ(-40px)
rotateY( 0deg);
}
#dice_output.show-two {
transform: translateZ(-40px)
rotateY( -90deg);
}
#dice_output.show-three {
transform: translateZ(-40px)
rotateY(-180deg);
}
#dice_output.show-four {
transform: translateZ(-40px)
rotateY( 90deg);
}
#dice_output.show-five {
transform: translateZ(-40px)
rotateX( -90deg);
}
#dice_output.show-six {
transform: translateZ(-40px)
rotateX( 90deg);
}
<html>
<head></head>
<body>
<div class="container clearfix">
<div class="stage">
<div id="dice_output" class="the-die">
<div id="one" class="die-side">1</div>
<div id="two" class="die-side" >2</div>
<div id="three" class="die-side" >3</div>
<div id="four" class="die-side" >4</div>
<div id="five" class="die-side" >5</div>
<div id="six" class="die-side" >6</div>
</div>
</div>
</div>
<div class="btn-container">
<button id="roll">roll the dice</button>
</div>
</body>
</html>
最佳答案
您还需要将 #one
和 #two
转换为 40px
const rollBtn = document.getElementById('roll');
const sides = ['one', 'two', 'three', 'four', 'five', 'six'];
const output = document.getElementById('dice_output');
let currentClass = '';
const rollDice = () => {
let randomSide = sides[Math.floor(Math.random() * (6) + 1)];
let currentSide = document.getElementById(randomSide);
let generatedSide = `show-${randomSide}`;
if (currentClass) {
output.classList.remove(currentClass);
}
output.classList.add(generatedSide);
currentClass = generatedSide;
}
rollBtn.addEventListener('click', rollDice);
* {
box-sizing: border-box;
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
.container {
width: 80px;
margin: 5% auto;
text-align: center;
}
.stage {
width: 80px;
height: 80px;
perspective: 300px;
}
.btn-container {
width: 80px;
margin: 2% auto;
text-align: center;
}
.the-big-z {
z-index: 1000;
}
.the-die {
width: 80px;
height: 80px;
position: relative;
transform-style: preserve-3d;
transition: all ease .5s;
display: block;
margin-bottom: 5%;
}
.die-side {
width: 80px;
height: 80px;
color: #fff;
background-color: #000;
position: absolute;
text-align: center;
padding-top: 20%;
border: solid 3px teal;
}
#one {
transform: rotateY( 0deg) translateZ(40px); // Here
}
#two {
transform: rotateY( 90deg) translateZ(40px); // And here
}
#three {
transform: rotateY(180deg) translateZ(40px);
}
#four {
transform: rotateY(-90deg) translateZ(40px);
}
#five {
transform: rotateX( 90deg) translateZ(40px);
}
#six {
transform: rotateX(-90deg) translateZ(40px);
}
#dice_output.show-one {
transform: translateZ(-40px)
rotateY( 0deg);
}
#dice_output.show-two {
transform: translateZ(-40px)
rotateY( -90deg);
}
#dice_output.show-three {
transform: translateZ(-40px)
rotateY(-180deg);
}
#dice_output.show-four {
transform: translateZ(-40px)
rotateY( 90deg);
}
#dice_output.show-five {
transform: translateZ(-40px)
rotateX( -90deg);
}
#dice_output.show-six {
transform: translateZ(-40px)
rotateX( 90deg);
}
<html>
<head></head>
<body>
<div class="container clearfix">
<div class="stage">
<div id="dice_output" class="the-die">
<div id="one" class="die-side">1</div>
<div id="two" class="die-side" >2</div>
<div id="three" class="die-side" >3</div>
<div id="four" class="die-side" >4</div>
<div id="five" class="die-side" >5</div>
<div id="six" class="die-side" >6</div>
</div>
</div>
</div>
<div class="btn-container">
<button id="roll">roll the dice</button>
</div>
</body>
</html>
关于css - 使用变换创建看起来干净的立方体,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55069744/