17 Aug 2015

Design 3D Cube using HTML and CSS

No comments  
-----HTML-----

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" href="css/primary.css">
    </head>

    <body>
        <section class="container">
            <div id="cube">
                <figure class="front"></figure>
                <figure class="back"></figure>
                <figure class="right"></figure>
                <figure class="left"></figure>
                <figure class="top"></figure>
                <figure class="bottom"></figure>
            </div>
        </section>  
    </body>
</html>

-----CSS-----

.container{
    width: 200px;
    height:200px;
    position: relative;
    -webkit-perspective:1000px;
}
#cube{
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    -webkit-transform-stlye:preserve-3d;
    
}
#cube figure{
    width:196px;
    height:196px;
    display: block;
    position: absolute;
    border: 2px solid #000;

}
#cube .front{
    background: red;
    -webkit-transform: rotateY(0deg) translateZ(100px);
}

#cube .back{
    background: green;
    -webkit-transform: rotateY(180deg) translateZ(100px);
}


#cube .right{
    background: blue;
    -webkit-transform: rotateY(90deg) translateZ(100px);
}


#cube .left{
    background: yellow;
    -webkit-transform: rotateY(-90deg) translateZ(100px);
}



#cube .top{
    background: brown;
    -webkit-transform: rotateX(90deg) translateZ(100px);
}


#cube .bottom{
    background: brown;
    -webkit-transform: rotateX(-90deg) translateZ(100px);
}
Share:

0 comments:

Post a Comment