How to Make 3D Perspective Boxes using CSS3

Prabakaran M
Aug 21
8.5k
0
7

Article

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>