How To Design The 3D Block With Hover Effect.
Here is the code of How to design the 3D block design by using only html and css.
By using html-css you can make a lots of designs and animations. Few done by me
and somewhat expect from you . Try to watch all the videos by codoblog. And stay connected.
CODE -
<html>
<head>
<style type="text/css">
body{
background-color: black;
}
.wrap{
margin-top: 150px;
perspective:1000px;
perspective-origin:50% 50%;
}
.cube{
margin: auto;
position: relative;
height: 200px;
width: 200px;
transform-style:preserve-3d;
}
.cube > div{
position:absolute;
box-sizing:border-box;
padding: 10px;
height: 100%;
width: 100%;
opacity: 0.7;
background-color: #000;
border: solid 1px #eeeeee;
color: rgb(0.255,255);
}
.front{
transform:translateZ(100px);
background: green;
}
.back{
transform:translateZ(-100px) rotateY(180deg);
}
.top{
transform:rotateX(-270deg) translateY(-100px);
transform-origin: top center;
}
.bottom{
transform:rotateX(270deg) translateY(100px);
transform-origin:bottom center;
}
@keyframes rotate{
from{
transform: rotateX(0deg) rotateY(0deg);
}
to{
transform:rotateX(360deg) rotateY(360deg);
}
}
.cube{
animation:rotate 14s infinite linear;
}
.wrap:hover .back{
transform:translateZ(-200px) rotateY(180deg);
}
.wrap:hover .front{
transform:translateZ(200px);
}
.wrap:hover .top{
transform:rotateX(-270deg) translateZ(100px) translateY(-100px);
}
.wrap:hover .bottom{
transform:rotateX(270deg) translateZ(100px) translateY(100px);
}
.cube > div{
transition:transform 2s ease-out;
}
</style>
</head>
<body>
<div class="wrap">
<div class="cube">
<div class="front"></div>
<div class="back"></div>
<div class="top"></div>
<div class="bottom"></div>
</div>
</div>
</body>
</html>
OUTPUT -
After Run the project.
&
After Hover
Try to Write the code and bring the output. Also use in websites of your own .
#Love CodoBlog
Watch video if you miss something ::--||>
😃😃😃😃
Comments
Post a Comment