# Making a 3D cube rotate

**URL:** <https://forum.freecodecamp.org/t/making-a-3d-cube-rotate/394708>\
**Category:** General\
**Created:** [May 27, 2020, 12:02am UTC](https://forum.freecodecamp.org/t/making-a-3d-cube-rotate/394708 "2020-05-27T00:02:42Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Nu2JavaS](https://avatars.discourse-cdn.com/v4/letter/n/85f322/32.png) [@Nu2JavaS](https://forum.freecodecamp.org/u/Nu2JavaS)\
**Post date:** [May 27, 2020, 12:02am UTC](https://forum.freecodecamp.org/t/making-a-3d-cube-rotate/394708/1 "2020-05-27T00:02:42Z")

</div>

Hey guys,

One last question: I found a bit of coding that creates a 3D cube and makes it rotate with selected radio buttons. I’m trying to edit it to make buttons with labels rather than the radio buttons and images instead of text. I’m relatively new at JavaScript, but I’ve been able to edit some of it. Could use a suggestion about what else I should change to make it work. Here is the link to the original code:

https://3dtransforms.desandro.com/cube

And this is what I’ve got so far:

```auto
<p class="button-group">
  <label>
    <input type="button" id="btn" name="rotate-cube-side" value="front" checked />
  </label>
  <label>
    <input type="button" id="btn" name="rotate-cube-side" value="right" /> 
  </label>
  <label>
    <input type="button" id="btn" name="rotate-cube-side" value="back" /> 
  </label>
  <label>
    <input type="button" id="btn" name="rotate-cube-side" value="left" /> 
  </label>
  <label>
    <input type="button" id="btn" name="rotate-cube-side" value="top" />
  </label>
  <label>
    <input type="button" id="btn" name="rotate-cube-side" value="bottom" />
  </label>
</p>

<script>
const btn = document.querySelector('#btn');
        btn.onclick = function () {
var cube = document.querySelector('.cube');
var buttonGroup = document.querySelector('.button-group');
var currentClass = '';

function changeSide() {
  var checkedRadio = buttonGroup.querySelector(':checked');
  var showClass = 'show-' + checkedRadio.value;
  if ( currentClass ) {
    cube.classList.remove( currentClass );
  }
  cube.classList.add( showClass );
  currentClass = showClass;
}
// set initial side
changeSide();

buttonGroup.addEventListener( 'change', changeSide );
</script>

```

---

<div class="post-metadata">

**Author:** ![DanCouper](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/dancouper/32/158608_2.png) [@DanCouper](https://forum.freecodecamp.org/u/DanCouper)\
**Post date:** [May 27, 2020, 12:18am UTC](https://forum.freecodecamp.org/t/making-a-3d-cube-rotate/394708/2 "2020-05-27T00:18:25Z")

</div>

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

Please use the “preformatted text” tool in the editor (`</>`) to add backticks around text.

 ![Pre-formatted-text](https://global.discourse-cdn.com/freecodecamp/original/3X/1/b/1b18854f1059217f29370444396145cc3a0cd8ae.gif)

See [this post](http://www.freecodecamp.com/forum/t/forum-code-formatting/25574) to find the backtick on your keyboard.  
**Note:** Backticks are not single quotes.

![markdown_Forums](https://sea3.discourse-cdn.com/freecodecamp/uploads/default/original/3X/4/b/4b9a26f0c243380dd84935f4e29b92e3ecee8d05.gif)

---

<div class="post-metadata">

**Author:** ![Sky020](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/sky020/32/128093_2.png) [@Sky020](https://forum.freecodecamp.org/u/Sky020)\
**Post date:** [May 27, 2020, 12:21am UTC](https://forum.freecodecamp.org/t/making-a-3d-cube-rotate/394708/3 "2020-05-27T00:21:05Z")

</div>

Hello there,

Please note: in any given HTML page, the `id` attribute’s value should be unique.

Hope this helps

---

<div class="post-metadata">

**Author:** ![Nu2JavaS](https://avatars.discourse-cdn.com/v4/letter/n/85f322/32.png) [@Nu2JavaS](https://forum.freecodecamp.org/u/Nu2JavaS)\
**Post date:** [May 27, 2020, 12:55am UTC](https://forum.freecodecamp.org/t/making-a-3d-cube-rotate/394708/4 "2020-05-27T00:55:32Z")

</div>

oh hey Dan, Thanks for letting me know. I was wondering how to make that work. I appreciate it!

---

<div class="post-metadata">

**Author:** ![Nu2JavaS](https://avatars.discourse-cdn.com/v4/letter/n/85f322/32.png) [@Nu2JavaS](https://forum.freecodecamp.org/u/Nu2JavaS)\
**Post date:** [May 27, 2020, 12:59am UTC](https://forum.freecodecamp.org/t/making-a-3d-cube-rotate/394708/5 "2020-05-27T00:59:07Z")

</div>

Sky, I do know that the id element can be whatever I want it to be.

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [May 27, 2020, 6:31am UTC](https://forum.freecodecamp.org/t/making-a-3d-cube-rotate/394708/6 "2020-05-27T06:31:11Z")

</div>

but they need to be unique, an id can’t be repeated, can be used only once in the page, or it break things

---

<div class="post-metadata">

**Author:** ![Nu2JavaS](https://avatars.discourse-cdn.com/v4/letter/n/85f322/32.png) [@Nu2JavaS](https://forum.freecodecamp.org/u/Nu2JavaS)\
**Post date:** [May 27, 2020, 10:04pm UTC](https://forum.freecodecamp.org/t/making-a-3d-cube-rotate/394708/7 "2020-05-27T22:04:18Z")

</div>

Okay,

I’ve edited the id elements to be unique, (see coding below). Now I’m noticing a const variable called _btn_ in the sample coding, however, given the new edits, there is no longer any variable with that name. So here are my two questions:

1. Do I need any const variable at all, or should I now create six of them to match the new name?

2. Do I need to create six new querySelector and onClick methods to match each new id variable?

- 
  - 
    - 
      - 
        - 
          - 
            - 
              - 
                - 
                  - 
                    - 
                      - 
                        - 
                          - Sample Coding: - - - - - - - - - - - - - -

```auto
<html lang="en">
  <head>
  	<style>
	* { box-sizing: border-box; }

body { font-family: sans-serif; }

.scene {
  width: 200px;
  height: 200px;
  border: 1px solid #CCC;
  margin: 80px;
  perspective: 400px;
}

.cube {
  width: 200px;
  height: 200px;
  position: relative;
  transform-style: preserve-3d;
  transform: translateZ(-100px);
  transition: transform 1s;
}

.cube.show-front { transform: translateZ(-100px) rotateY( 0deg); }
.cube.show-right { transform: translateZ(-100px) rotateY( -90deg); }
.cube.show-back { transform: translateZ(-100px) rotateY(-180deg); }
.cube.show-left { transform: translateZ(-100px) rotateY( 90deg); }
.cube.show-top { transform: translateZ(-100px) rotateX( -90deg); }
.cube.show-bottom { transform: translateZ(-100px) rotateX( 90deg); }

.cube__face {
  position: absolute;
  width: 200px;
  height: 200px;
  border: 2px solid black;
  line-height: 200px;
  font-size: 40px;
  font-weight: bold;
  color: white;
  text-align: center;
}

.cube__face--front { background: hsla( 0, 100%, 50%, 0.7); }
.cube__face--right { background: hsla( 60, 100%, 50%, 0.7); }
.cube__face--back { background: hsla(120, 100%, 50%, 0.7); }
.cube__face--left { background: hsla(180, 100%, 50%, 0.7); }
.cube__face--top { background: hsla(240, 100%, 50%, 0.7); }
.cube__face--bottom { background: hsla(300, 100%, 50%, 0.7); }

.cube__face--front { transform: rotateY( 0deg) translateZ(100px); }
.cube__face--right { transform: rotateY( 90deg) translateZ(100px); }
.cube__face--back { transform: rotateY(180deg) translateZ(100px); }
.cube__face--left { transform: rotateY(-90deg) translateZ(100px); }
.cube__face--top { transform: rotateX( 90deg) translateZ(100px); }
.cube__face--bottom { transform: rotateX(-90deg) translateZ(100px); }

label { margin-right: 10px; }
       
	</style>
  </head>
  <body>
    <div class="scene">
  <div class="cube">
    <div class="cube __face cube__ face--front">front</div>
    <div class="cube __face cube__ face--back">back</div>
    <div class="cube __face cube__ face--right">right</div>
    <div class="cube __face cube__ face--left">left</div>
    <div class="cube __face cube__ face--top">top</div>
    <div class="cube __face cube__ face--bottom">bottom</div>
  </div>
</div>

<!-- Navigation starts here: -->
<p class="button-group">
  <label>
    <input type="button" id="cFront" name="rotate-cube-side" value="front" checked />
  </label>
  <label>
    <input type="button" id="cRight" name="rotate-cube-side" value="right" /> 
  </label>
  <label>
    <input type="button" id="cBack" name="rotate-cube-side" value="back" /> 
  </label>
  <label>
    <input type="button" id="cLeft" name="rotate-cube-side" value="left" /> 
  </label>
  <label>
    <input type="button" id="cTop" name="rotate-cube-side" value="top" />
  </label>
  <label>
    <input type="button" id="cBottom" name="rotate-cube-side" value="bottom" />
  </label>
</p>

<script>
const btn = document.querySelector('#btn');
        btn.onclick = function () {
var cube = document.querySelector('.cube');
var buttonGroup = document.querySelector('.button-group');
var currentClass = '';

function changeSide() {
  var checkedRadio = buttonGroup.querySelector(':checked');
  var showClass = 'show-' + checkedRadio.value;
  if ( currentClass ) {
    cube.classList.remove( currentClass );
  }
  cube.classList.add( showClass );
  currentClass = showClass;
}
// set initial side
changeSide();

buttonGroup.addEventListener( 'change', changeSide );
</script>

  </body>
</html>

```

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [June 1, 2021, 6:51pm UTC](https://forum.freecodecamp.org/t/making-a-3d-cube-rotate/394708/8 "2021-06-01T18:51:52Z")

</div>

Closed on June 1, 2021, 6:51pm UTC