3D Cube Animation in html and css

<!DOCTYPE html>
<html>
<head>
<title>3D cube animation</title>
<style type=”text/css”>

.rotating-box
{
width: 400px;
height: 400px;
margin: 10px auto;
perspective: 800px;
}

.single-rb
{
width: 400px;
animation: rotate 15s linear infinite;
transform-style: preserve-3d;
margin-top: 120px;
}

.single-rb img
{
height: 400px;
width: 400px;
}

.single-rb div
{
position: absolute;
width: 400px;
height: 400px;
}

.front-side
{
transform: translateZ(200px);
}

.back-side
{
transform: rotateY(180deg) translateZ(200px);

}

.left-side
{
transform-origin: left;
transform: rotateY(-90deg) translateX(-200px);
}

.right-side
{
transform-origin: right;
transform: rotateY(90deg) translateX(200px);
}

.top-side
{
transform-origin: top;
transform: rotateY(-90deg) translateX(-200px);
}

.bottom-side
{
transform-origin: bottom;
transform: rotateY(90deg) translateX(200px);
}

@keyframes rotate

{
0%{
transform: rotateY(0);
}
100%{
transform: rotateY(360deg);
}
}
</style>
</head>
<body>

<div class=”rotating-box”>
<div class=”single-rb”>
<div class=”front-side” alt=””>
<img src=”image1.jpg”>
</div>
<div class=”back-side” alt=””>
<img src=”image2.jpg”>
</div>
<div class=”left-side” alt=””>
<img src=”image3.jpg”>
</div>
<div class=”right-side” alt=””>
<img src=”image4.jpg”>
</div>
<div class=”top-side” alt=””>
<img src=”image5.jpg”>
</div>
<div class=”bottom-side” alt=””>
<img src=”image6.jpg”>
</div>
</div>
</div>

</body>
</html>

 

Happy Hacking and Learn everything in website and subscribe newsletter in website to get new updates . subscribe newsletter to get mail from admin@studentsempire.com  to send your mail address.

If you have Learn Ethical Hacking from scratch and Web Development from scratch send me mail from my mail id.

One Reply to “3D Cube Animation in html and css”

Leave a Reply

Your email address will not be published. Required fields are marked *