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
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"..


StorialTech3D Cube Image
3D Cube Image

Welcome to another tutorial of Web-design in StorialTech.This tutorial we make a nice 3D cube image..


StorialTechBootstrap 5 | New Update of Bootstrap
Bootstrap 5 | New Update of Bootstrap

Bootstrap হলো সবচেয়ে বড় এবং জনপ্রিয় Front-end-FrameworkBootstrap তাদের নতুন ভার্সন পাবলিশ করেছে এবং ভার্সনটির নাম..