Using transform to create clean looking cube The Next CEO of Stack OverflowPrevent flicker on webkit-transition of webkit-transformHow to apply multiple transforms in CSS?CSS Transform with element resizingcss 3D transform cube perspectiveElement in transform rotate3d parent still looks flatcss3 transform-origin issue in 3D cubeUsing matrix3D to create a cube, as an alternative to multiple transforms?Creating a cube with css3-transform3d cube face rotation transform-origin misplacedCreating a cube opening animation
That's an odd coin - I wonder why
How do I secure a TV wall mount?
Early programmable calculators with RS-232
Masking layers by a vector polygon layer in QGIS
Could a dragon use hot air to help it take off?
How does a dynamic QR code work?
Gödel's incompleteness theorems - what are the religious implications?
Find a path from s to t using as few red nodes as possible
How to implement Comparable so it is consistent with identity-equality
Ising model simulation
Planeswalker Ability and Death Timing
Creating a script with console commands
Can Sri Krishna be called 'a person'?
How to compactly explain secondary and tertiary characters without resorting to stereotypes?
Incomplete cube
Does Germany produce more waste than the US?
How to show a landlord what we have in savings?
How seriously should I take size and weight limits of hand luggage?
Arrows in tikz Markov chain diagram overlap
Why do we say “un seul M” and not “une seule M” even though M is a “consonne”?
Why was Sir Cadogan fired?
How did scripture get the name bible?
Car headlights in a world without electricity
Another proof that dividing by 0 does not exist -- is it right?
Using transform to create clean looking cube
The Next CEO of Stack OverflowPrevent flicker on webkit-transition of webkit-transformHow to apply multiple transforms in CSS?CSS Transform with element resizingcss 3D transform cube perspectiveElement in transform rotate3d parent still looks flatcss3 transform-origin issue in 3D cubeUsing matrix3D to create a cube, as an alternative to multiple transforms?Creating a cube with css3-transform3d cube face rotation transform-origin misplacedCreating a cube opening animation
2
So there are lots of posts related to this but I can't seem to nail down exactly where I'm going wrong in my styles, so apologies if some of you see this as a rehash of previous questions.
This problem is very simple: I'm simply trying to build a random dice roll. The js works as expected, everything functions properly. The issue is that the cube just looks quite awkward, and I'm not entirely sure why. I'm usually pretty solid with css, but I don't do a lot of work with 3d transforms so there's a lack of intuition on my part. If you run the snippet you can see that not all the sides are smooth when the cube rotates, some sides look to be caved in and I'm not sure why (particularly the 1 and 2 sides). The full code is in the below snippet:
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>css css-transforms
asked Mar 8 at 19:26
tganyantganyan
185313
add a comment |
2
So there are lots of posts related to this but I can't seem to nail down exactly where I'm going wrong in my styles, so apologies if some of you see this as a rehash of previous questions.
This problem is very simple: I'm simply trying to build a random dice roll. The js works as expected, everything functions properly. The issue is that the cube just looks quite awkward, and I'm not entirely sure why. I'm usually pretty solid with css, but I don't do a lot of work with 3d transforms so there's a lack of intuition on my part. If you run the snippet you can see that not all the sides are smooth when the cube rotates, some sides look to be caved in and I'm not sure why (particularly the 1 and 2 sides). The full code is in the below snippet:
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>css css-transforms
asked Mar 8 at 19:26
tganyantganyan
185313
notice that the transform applied to 1 is equivalent to none
– Temani Afif
Mar 8 at 19:36
Yep, as pointed out in the below response, literally just a typo that my eyes went blind to for some reason. It's always those small stupid things that bite you it seems.
– tganyan
Mar 8 at 19:38
add a comment |
2
2
2
So there are lots of posts related to this but I can't seem to nail down exactly where I'm going wrong in my styles, so apologies if some of you see this as a rehash of previous questions.
This problem is very simple: I'm simply trying to build a random dice roll. The js works as expected, everything functions properly. The issue is that the cube just looks quite awkward, and I'm not entirely sure why. I'm usually pretty solid with css, but I don't do a lot of work with 3d transforms so there's a lack of intuition on my part. If you run the snippet you can see that not all the sides are smooth when the cube rotates, some sides look to be caved in and I'm not sure why (particularly the 1 and 2 sides). The full code is in the below snippet:
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>css css-transforms
asked Mar 8 at 19:26
tganyantganyan
185313
So there are lots of posts related to this but I can't seem to nail down exactly where I'm going wrong in my styles, so apologies if some of you see this as a rehash of previous questions.
This problem is very simple: I'm simply trying to build a random dice roll. The js works as expected, everything functions properly. The issue is that the cube just looks quite awkward, and I'm not entirely sure why. I'm usually pretty solid with css, but I don't do a lot of work with 3d transforms so there's a lack of intuition on my part. If you run the snippet you can see that not all the sides are smooth when the cube rotates, some sides look to be caved in and I'm not sure why (particularly the 1 and 2 sides). The full code is in the below snippet:
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>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>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>css css-transforms
css css-transforms
asked Mar 8 at 19:26
tganyantganyan
185313
asked Mar 8 at 19:26
tganyantganyan
185313
asked Mar 8 at 19:26
tganyantganyan
185313
asked Mar 8 at 19:26
tganyantganyan
185313
asked Mar 8 at 19:26
tganyantganyan
185313
185313
notice that the transform applied to 1 is equivalent to none
– Temani Afif
Mar 8 at 19:36
Yep, as pointed out in the below response, literally just a typo that my eyes went blind to for some reason. It's always those small stupid things that bite you it seems.
– tganyan
Mar 8 at 19:38
add a comment |
notice that the transform applied to 1 is equivalent to none
– Temani Afif
Mar 8 at 19:36
Yep, as pointed out in the below response, literally just a typo that my eyes went blind to for some reason. It's always those small stupid things that bite you it seems.
– tganyan
Mar 8 at 19:38
notice that the transform applied to 1 is equivalent to none
– Temani Afif
Mar 8 at 19:36
notice that the transform applied to 1 is equivalent to none
– Temani Afif
Mar 8 at 19:36
Yep, as pointed out in the below response, literally just a typo that my eyes went blind to for some reason. It's always those small stupid things that bite you it seems.
– tganyan
Mar 8 at 19:38
Yep, as pointed out in the below response, literally just a typo that my eyes went blind to for some reason. It's always those small stupid things that bite you it seems.
– tganyan
Mar 8 at 19:38
add a comment |
1 Answer
1
active
oldest
votes
2
You also need to translate the #one and #two to 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>answered Mar 8 at 19:32
Anurag SrivastavaAnurag Srivastava
2,13311019
Holy shit, code blindness is a real thing, literally just a typo that my eyes skated right past. This is a true facepalm moment, but sometimes a fresh pair of eyes catches dumb mistakes like that. Thanks man.
– tganyan
Mar 8 at 19:35
No worries, happens to everyone. You can accept if the answer helped you. :)
– Anurag Srivastava
Mar 8 at 19:36
2
Answer accepted!
– tganyan
Mar 8 at 19:42
add a comment |
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55069744%2fusing-transform-to-create-clean-looking-cube%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
2
You also need to translate the #one and #two to 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>answered Mar 8 at 19:32
Anurag SrivastavaAnurag Srivastava
2,13311019
Holy shit, code blindness is a real thing, literally just a typo that my eyes skated right past. This is a true facepalm moment, but sometimes a fresh pair of eyes catches dumb mistakes like that. Thanks man.
– tganyan
Mar 8 at 19:35
No worries, happens to everyone. You can accept if the answer helped you. :)
– Anurag Srivastava
Mar 8 at 19:36
2
Answer accepted!
– tganyan
Mar 8 at 19:42
add a comment |
2
You also need to translate the #one and #two to 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>answered Mar 8 at 19:32
Anurag SrivastavaAnurag Srivastava
2,13311019
Holy shit, code blindness is a real thing, literally just a typo that my eyes skated right past. This is a true facepalm moment, but sometimes a fresh pair of eyes catches dumb mistakes like that. Thanks man.
– tganyan
Mar 8 at 19:35
No worries, happens to everyone. You can accept if the answer helped you. :)
– Anurag Srivastava
Mar 8 at 19:36
2
Answer accepted!
– tganyan
Mar 8 at 19:42
add a comment |
2
2
2
You also need to translate the #one and #two to 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>answered Mar 8 at 19:32
Anurag SrivastavaAnurag Srivastava
2,13311019
You also need to translate the #one and #two to 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>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>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>answered Mar 8 at 19:32
Anurag SrivastavaAnurag Srivastava
2,13311019
answered Mar 8 at 19:32
Anurag SrivastavaAnurag Srivastava
2,13311019
answered Mar 8 at 19:32
Anurag SrivastavaAnurag Srivastava
2,13311019
answered Mar 8 at 19:32
Anurag SrivastavaAnurag Srivastava
2,13311019
2,13311019
Holy shit, code blindness is a real thing, literally just a typo that my eyes skated right past. This is a true facepalm moment, but sometimes a fresh pair of eyes catches dumb mistakes like that. Thanks man.
– tganyan
Mar 8 at 19:35
No worries, happens to everyone. You can accept if the answer helped you. :)
– Anurag Srivastava
Mar 8 at 19:36
2
Answer accepted!
– tganyan
Mar 8 at 19:42
add a comment |
Holy shit, code blindness is a real thing, literally just a typo that my eyes skated right past. This is a true facepalm moment, but sometimes a fresh pair of eyes catches dumb mistakes like that. Thanks man.
– tganyan
Mar 8 at 19:35
No worries, happens to everyone. You can accept if the answer helped you. :)
– Anurag Srivastava
Mar 8 at 19:36
2
Answer accepted!
– tganyan
Mar 8 at 19:42
Holy shit, code blindness is a real thing, literally just a typo that my eyes skated right past. This is a true facepalm moment, but sometimes a fresh pair of eyes catches dumb mistakes like that. Thanks man.
– tganyan
Mar 8 at 19:35
Holy shit, code blindness is a real thing, literally just a typo that my eyes skated right past. This is a true facepalm moment, but sometimes a fresh pair of eyes catches dumb mistakes like that. Thanks man.
– tganyan
Mar 8 at 19:35
No worries, happens to everyone. You can accept if the answer helped you. :)
– Anurag Srivastava
Mar 8 at 19:36
No worries, happens to everyone. You can accept if the answer helped you. :)
– Anurag Srivastava
Mar 8 at 19:36
2
2
Answer accepted!
– tganyan
Mar 8 at 19:42
Answer accepted!
– tganyan
Mar 8 at 19:42
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55069744%2fusing-transform-to-create-clean-looking-cube%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
notice that the transform applied to 1 is equivalent to none
– Temani Afif
Mar 8 at 19:36
Yep, as pointed out in the below response, literally just a typo that my eyes went blind to for some reason. It's always those small stupid things that bite you it seems.
– tganyan
Mar 8 at 19:38