How to Make 3D Perspective Boxes using CSS3

Introduction

 

In this article, I will demonstrate how to make 3D perspective boxes using CSS3. CSS stands for Cascading Style Sheet,and helps design and style a form in a web application.  CSS3 is always used to create an animated form and application with the help of HTML 5 tools. It also provides advanced concepts used in web applications, such as 3D transformation, animation and user interface.

 

Step 1

 

First Open a Sublime Text editor, 

• Open start -> Sublime Text Editor.
• Go to file -> File -> New File
• Name of File -> 3DBoxes.html.

Step 2 - CSS Style code

 

Note that in the below sample, I have inserted CSS3 styles inside the <style> tag. You will create CSS3 styles for the 3D cube boxes animation in the below code:

<style>

body {
    font-size: 100%;
}
.perspective {
    background-color: hsla(0,0%,0%,.1);
    background-image: linear-gradient(hsla(0,0%,0%,.1) 2.5%, transparent 2.5%, transparent 97.5%, hsla(0,0%,0%,.1) 97.5%),
                      linear-gradient(90deg, hsla(0,0%,0%,.1) 2.5%, transparent 2.5%, transparent 97.5%, hsla(0,0%,0%,.1) 97.5%);
    background-size: 3em 3em;
    box-shadow: 0 0 0 .25em hsla(0,0%,0%,.2);
    height: 9em;
    left: 50%;
    margin: -7.5em;
    padding: 3em;
    position: absolute;
    top: 50%;
    transform: perspective(500px) rotateX(45deg) rotateZ(45deg);
    transform-style: preserve-3d;
    transition: 1s;
    width: 9em;
}
.cube,
.cube:after,
.cube:before {
    box-shadow: inset 0 0 0 .25em hsla(0,0%,0%,.1);
    content: '';
    float: left;
    height: 3em;
    position: absolute;
    width: 3em;
}
/* Top */
.cube {
    background-color: blue;
    position: relative;
    transform: rotateZ(0deg) translateZ(3em);
    transform-style: preserve-3d;
    transition: .25s;
}
/* Left */
.cube:after {
    background-color: #e55;
    transform: rotateX(-90deg) translateY(3em);
    transform-origin: 100% 100%;
}
/* Right */
.cube:before {
    background-color: #d44;
    transform: rotateY(90deg) translateX(3em);
    transform-origin: 100% 0;
}
/* Alternate Colour */
.cube:nth-child(even) {
    background-color: #fc6;
}
.cube:nth-child(even):after {
    background-color: #eb5;
}
.cube:nth-child(even):before {
    background-color: #da4;
}
/* Animation */
@keyframes wave {
    50% { transform: translateZ(4.5em); }
}
.cube:nth-child(1) {
    animation: wave 2s .1s ease-in-out infinite;
}
.cube:nth-child(2) {
    animation: wave 2s .2s ease-in-out infinite;
}
.cube:nth-child(3) {
    animation: wave 2s .4s ease-in-out infinite;
}
.cube:nth-child(4) {
    animation: wave 2s .3s ease-in-out infinite;
}
.cube:nth-child(5) {
    animation: wave 2s .5s ease-in-out infinite;
}
.cube:nth-child(6) {
    animation: wave 2s .7s ease-in-out infinite;
}
.cube:nth-child(7) {
    animation: wave 2s .6s ease-in-out infinite;
}
.cube:nth-child(8) {
    animation: wave 2s .8s ease-in-out infinite;
}
.cube:nth-child(9) {
    animation: wave 2s .9s ease-in-out infinite;
}
/* Labels */
input {
    display: none;
}
label {
    background: #ddd;
    cursor: pointer;
    display: block;
    font-family: sans-serif;
    line-height: 3em;
    position: absolute;
    right: .5em;
    text-align: center;
    top: 4em;
    transition: .25s;
    width: 4.5em;
}
label[for="left"] {
    right: 10.5em;
}
label[for="reset"] {
    right: 5.5em;
}
label[for="up"] {
    right: 5.5em;
    top: .5em;
}
label[for="down"] {
    right: 5.5em;
    top: 7.5em;
}
label:hover {
    background-color: #bbb;
}
input:checked + label {
    background-color: #666;
    color: #fff;
}
#left:checked ~ .perspective {
    transform: perspective(500px) rotateX(45deg) rotateZ(75deg);
}
#right:checked ~ .perspective {
    transform: perspective(500px) rotateX(45deg) rotateZ(15deg);
}
#up:checked ~ .perspective {
    transform: perspective(500px) rotateX(75deg) rotateZ(45deg);
}
#down:checked ~ .perspective {
    transform: perspective(500px) rotateX(15deg) rotateZ(45deg);
}​

</style>

Step 3

 

Below you can see all the code for HTML5 for boxes bouncing in a 3D space. By clicking on any of the move buttons in the top-right corner, you can view this 3D model from various views. This is represented in the below HTML5 code.

 

<body>
    <input type="radio" id="left" name="rotate">
        <label for="left">Left</label>
        <input type="radio" id="reset" name="rotate" checked>
            <label for="reset">Reset</label>
            <input type="radio" id="right" name="rotate">
                <label for="right">Right</label>
                <input type="radio" id="up" name="rotate">
                    <label for="up">Up</label>
                    <input type="radio" id="down" name="rotate">
                        <label for="down">Down</label>
                        <div class="perspective">
                            <div class="cube"></div>
                            <div class="cube"></div>
                            <div class="cube"></div>
                            <div class="cube"></div>
                            <div class="cube"></div>
                            <div class="cube"></div>
                            <div class="cube"></div>
                            <div class="cube"></div>
                            <div class="cube"></div>
                        </div>
                    </body>

Output

 

Right-click on the sublime text window stage, a dialog box appears, select->open a new browser,

 

You must have the Firebox browser on your PC. You will see the 3D perspective boxes, as we run the application in the browser.

 

 

 

 

 

 

Summary

 
I hope you understood this article, in which we created 3D perspective boxes. Thanks for reading, and have a nice day  :)