3D Cube Image

3D Cube Image

Welcome to another tutorial of Web-design in StorialTech.This tutorial we make a nice 3D cube image using HTML5 and CSS3.First of all we need to create a index.html and style.css file.after creating those file we need to open it in our editor and follow this coding instruction..

index.html

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>3D Cube Image</title>

    <link rel="stylesheet" href="3dcube.css">

</head>

<body>

    <div class="rotating-box">

        <div class="single-rb">

            <div class="front-side">

                <img src="picture/img1.jpg"/>

            </div>

            <div class="back-side">

                <img src="picture/img2.jpg"/>

            </div>

            <div class="left-side">

                <img src="picture/img3.jpg"/>

            </div>

            <div class="right-side">

                <img src="picture/img4.jpg"/>

            </div>

            <div class="top-side">

                <img src="picture/img5.jpg"/>

            </div>

            <div class="bottom-side">

                <img src="picture/img6.jpg"/>

            </div>

        </div>

    </div>

</body>

</html>

style.css

body{
    background: #37B9E9;
}
.rotating-box{
    height:400px;
    width:400px;
    perspective:800px;
    margin:10px auto;
    margin-top:200px;
}
.single-rb{
    width:400px;
    animation:rotate 60s linear infinite;
    transform-style:preserve-3d;
    margin-top:100px;
}
.single-rb img{
    height:400px;
    width:400px;
}
.single-rb div{
    position:absolute;
    height:400px;
    width:400px;
}
.front-side{
    transform:translateZ(200px);
}
.back-side{
    transform:rotateY(180deg)
    translateZ(200px);
}
.left-side{
    transform:rotateY(-90deg)
    translateX(-200px);
    transform-origin:left;
}
.right-side{
    transform:rotateY(90deg)
    translateX(200px);
    transform-origin:right;
}
.top-side{
    transform:rotateX(-90deg)
    translateY(-200px);
    transform-origin:top;
}
.bottom-side{
    transform:rotateX(90deg)
    translateY(200px);
    transform-origin:bottom;
}
@keyframes rotate{
    0%{transform:rotateY(0);}
    100%{transform:rotateY(360deg);}
}

 

0 Comments Here
Authentication required

You must log in to post a comment.

Log in
Related Post
StorialTechBootstrap HTML Responsive Online School Management Registration Form
Bootstrap HTML Responsive Online School Management Registration Form

Welcome to another tutorial of Web-design in StorialTech.This tutorial we make a nice "Responsive Online School..


StorialTech3D Slinky Text with Html and Css
3D Slinky Text with Html and Css

Web designer's need to know many feature design for his skill and website. Now we make..


StorialTechNice background Image Intro Page
Nice background Image Intro Page

Welcome to another tutorial of Web-design in StorialTech.This tutorial we make a nice "Background Image intro-page"..