Hello, in this tutorial, I will show you how to create a 3D rotating cube with radio buttons to control the rotations using only CSS.
3D Rotating Cube Art Gallery
How to build a 3D rotating cube art gallery with only CSS.
Setting up the HTML Page
To begin, add a div element and apply the cube-container class to it.
Inside the div, add 6 input elements and set it to type=”radio” for the radio buttons. Set the name attribute of each button to “cube-gallery” so it will put the buttons in the same group. Lastly, add checked to the first radio button so the first radio button will be in the checked state and then apply the radio-button class to all the buttons.
For the next part, we will create the cube. Add a div element after the radio buttons and apply the cube class to it. Inside the cube, add 6 div elements for each side of the cube and then apply the cube-side class to all of them.
Create a CSS file and add it to the page.
<link rel="stylesheet" href="./index.css">
Building the CSS
In the CSS file, create 6 variables for the images you want to put on each side.
Add the CSS selector for the body and then set the width and height to match the dimensions of the window.
Set the display to flex, justify-content: center, align-items: center, and overflow to hidden. This will allow us to center the cube on the screen.
Now add the selectors for the cube-container, cube, cube-side- and radio-button classes.
.cube-container {
}
.cube {
}
.cube-side {
}
.radio-button {
}
For radio-button set the bottom-margin to 5em. This will place the buttons 5em above the cube.
.radio-button {
margin-bottom: 5em;
}
For cube-container, set the dimensions for the cube to 15em using width and height. Then set text-align to center and the perspective to 3 times the cube size.
Using perspective will allow us to view the elements in a 3D point-of-view.
For cube, set the width and height to match the container, position to relative, transform-style to preserve-3d, and transition-duration to 2s.
Using transform-style: preserve-3d will allow us to preserve the 3d transformations while transitioning.
transition-duration will help us create the rotation animation.
Now for the sides of the cube, set the position to absolute. This way, we can place each side relative to the cube.
Set the width and height to 100%, background color to white, and border to 1px solid black.
If we look at the results on the browser, we’ll see a square in the center, but there are really 6 squares on top of each other.
Creating the Cube
To create the cube, create a CSS selector for each side using the nth-child pseudo class.
.cube-side:nth-child(1) {
}
.cube-side:nth-child(2) {
}
.cube-side:nth-child(3) {
}
.cube-side:nth-child(4) {
}
.cube-side:nth-child(5) {
}
.cube-side:nth-child(6) {
}
We are starting from 1 and ending on 6 because there are 6 sides to the cube.
For the first, second, third, and fourth sides, use the transform property and then rotateY() function to rotate them in the Y-axis.
For the:
First, use 0 degrees
Second, use 90 degrees
Third, use 180 degrees
Fourth, use -90 degrees.
Fifth and sixth sides, use the rotateX() function and rotate the fifth side by -90 degrees and the sixth side by 90 degrees.
If we look at the result on the browser, there should be a box with a line across the center. This tells us everything is transformed correctly.
If we add some transform rotations to the cube, we will be able to see effects easier.
.cube {
width: 100%;
height: 100%;
position: relative;
transform-style: preserve-3d;
transition-duration: 2s;
transform: rotateX(-15deg) rotateY(20deg);
}
They are all stacked on top of each other in the center because the rotateX() and rotateY() functions will rotate the element relative to the center.
To move them to the correct positions, add a second transform to all the sides with the translateZ() function.
Since each sides are placed in the center, we need to translate it by half the size of the cube.
If we look at the result now, we will see the cube.
Adding the Images
To add the images, in the cube-side selector, set the background-position to center and the background-size to cover.
Then for each of the individual sides, set the background-image property with the image variables that was declared.
If we look at the result now, the images are placed on each side.
Rotating the Cube with the Radio Buttons
In the CSS file, remove the transforms from the .cube selector.
Add a selector for the radio-button class and apply the checked pseudo class to it. Then use the tilde symbol to point to the cube element.
.radio-button:checked ~ .cube { }
Set the transition-duration to 3 seconds so we’ll get the animation effect. Then set the transition-timing-function with the cubic-bezier() function.
.radio-button:checked ~ .cube {
transition-duration: 3s;
transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}
Add the same selector 6 more times to represent each of the radio button.
Add the nth-child() pseudo class to each, right before the checked pseudo class, and label them from 1 to 6.
This will allow us to keep track on which radio button is in the checked state.
.radio-button:nth-child(1):checked ~ .cube {
}
.radio-button:nth-child(2):checked ~ .cube {
}
.radio-button:nth-child(3):checked ~ .cube {
}
.radio-button:nth-child(4):checked ~ .cube {
}
.radio-button:nth-child(5):checked ~ .cube {
}
.radio-button:nth-child(6):checked ~ .cube {
}
If any of the buttons are checked, we want to rotate the cube.
For the first radio button, use the transform property and rotate the cube by -15 degrees in the X-axis and 20 degrees in the Y-axis. This will give us a small tilt when the browser loads up the cube.
For the next ones, use
-15 degrees and 180 degrees,
-15 degrees and 90 degrees,
-15 degrees and -90 degrees,
-105 degrees and 0 degrees,
75 degrees and 0 degrees.
If we look at the result now and click on the radio buttons, our cube will spin to the correct positions.
That is all for this tutorial, if you find this helpful, please give it a like, share, and subscribe to support the channel. See you in the next video.
Download Source Code
