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







share|improve this question






















  • 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















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







share|improve this question






















  • 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













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







share|improve this question














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






share|improve this question













share|improve this question











share|improve this question




share|improve this question










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

















  • 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












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>








share|improve this answer























  • 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











Your Answer






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


















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>








share|improve this answer























  • 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















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>








share|improve this answer























  • 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













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>








share|improve this answer













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>






share|improve this answer












share|improve this answer



share|improve this answer










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

















  • 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



















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














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





















































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







-

Popular posts from this blog

Identity Server 4 is not redirecting to Angular app after login2019 Community Moderator ElectionIdentity Server 4 and dockerIdentityserver implicit flow unauthorized_clientIdentityServer Hybrid Flow - Access Token is null after user successful loginIdentity Server to MVC client : Page Redirect After loginLogin with Steam OpenId(oidc-client-js)Identity Server 4+.NET Core 2.0 + IdentityIdentityServer4 post-login redirect not working in Edge browserCall to IdentityServer4 generates System.NullReferenceException: Object reference not set to an instance of an objectIdentityServer4 without HTTPS not workingHow to get Authorization code from identity server without login form

Image
How to make healing in an exploration game interesting What's the meaning of “spike” in the context of “adrenaline spike”? Welcoming 2019 Pi day: How to draw the letter π? Do I need life insurance if I can cover my own funeral costs? What do Xenomorphs eat in the Alien series? Python if-else code style for reduced code for rounding floats My adviser wants to be the first author Do I need to get involved in office politics to get ahead? Why one should not leave fingerprints on bulbs and plugs? How to change two letters closest to a string and one letter immediately after a string using notepad++ Why doesn't the EU now just force the UK to choose between referendum and no-deal? How to deal with taxi scam when on vacation? Recruiter wants very extensive technical details about all of my previous work What is the least resource intensive way to generate the luatex font cache for a new font? How Could an Airship Be Repaired Mid-Flight ...
Read more

2005 Ahvaz unrest Contents Background Causes Casualties Aftermath See also References Navigation menue"At Least 10 Are Killed by Bombs in Iran""Iran"Archived"Arab-Iranians in Iran to make April 15 'Day of Fury'"State of Mind, State of Order: Reactions to Ethnic Unrest in the Islamic Republic of Iran.10.1111/j.1754-9469.2008.00028.x"Iran hangs Arab separatists"Iran Overview from ArchivedConstitution of the Islamic Republic of Iran"Tehran puzzled by forged 'riots' letter""Iran and its minorities: Down in the second class""Iran: Handling Of Ahvaz Unrest Could End With Televised Confessions""Bombings Rock Iran Ahead of Election""Five die in Iran ethnic clashes""Iran: Need for restraint as anniversary of unrest in Khuzestan approaches"Archived"Iranian Sunni protesters killed in clashes with security forces"Archived

Image
Sheikh Khazal (1924)Unrest (1925)Unrest (1928)Unrest (1940)1943 revolt1945 revoltInsurgency (1956-70)Insurgency (1979)Embassy siege (1980)Unrest (2005)2005–06 Ahvaz bombingsDay of Rage (2011)Uprising of Dignity (2018) Arab rebellionsProtests in Iran2005 riotsPolitical riots2005 in IranAhvazKhuzestan conflictHuman rights in IranAhwazi Arabs Iranian ArabsAhvazKhuzestanbombingsPersian GulfKhuzestanShadeganHoveyzehSusangerdMahshahrKhorramshahrAbadanAhvazConstitution of IranPersianofficial languageconstitution of the Islamic RepublicconstitutionIranian ArabsAmnesty InternationalConstitution of the Islamic Republic of IranMohammad-Ali AbtahiMohammad KhatamiAmnesty InternationalAli ShamkhaniAhvazIranian ArabsprotestAhvazNobel Peace PrizeShirin Ebadi 2005 Ahvaz unrest Part of Arab separatism in Khuzestan Iranian Khuzestan province Date 15–18 April 2005 Methods demonstrations, riots Status Unrest quelled Parties to the civil conflict Iranian Arabs Iranian Government Lead figures ...
Read more

Can't initialize raids on a new ASUS Prime B360M-A motherboard2019 Community Moderator ElectionSimilar to RAID config yet more like mirroring solution?Can't get motherboard serial numberWhy does the BIOS entry point start with a WBINVD instruction?UEFI performance Asus Maximus V Extreme

Image
"One can do his homework in the library" Why does Deadpool say "You're welcome, Canada," after shooting Ryan Reynolds in the end credits? Potential difference and current flow It's a yearly task, alright Co-worker team leader wants to inject the crap software product of his friends into our development. What should I say to our common boss? Touchscreen-controlled dentist office snowman collector game What to do when during a meeting client people start to fight (even physically) with each others? What options are left, if Britain cannot decide? How could our ancestors have domesticated a solitary predator? Professor being mistaken for a grad student When two POV characters meet Replacing Windows 7 security updates with anti-virus? What has been your most complicated TikZ drawing? Can the word "advantage" be used as an adjective? How could a female member of a species produce eggs unto death? Can the druid cantrip Thorn...
Read more