Skip to main content

Design 3D Block with hover animation



        How To Design The 3D Block With Hover Effect.



The 3D block



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 ::--||>

        

😃😃😃😃









 

Labels

Labels:

Comments

Post a Comment

The Most Populer

The World Map

The World Map Here is the code of Designing the WORLD MAP by using Html-Css-Js only.Google Map provide you the option that is Map for Developer. So, CodoBlog provide you the code for how to design the map. CODE -     <!DOCTYPE html> <html> <head> <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <link href='https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.css' rel='stylesheet'/>     <link rel="stylesheet" type="text/css" href=""> <title>The World Map</title> <style> *{ margin: 0; padding: 0; } #map{ width: 100vw; height: 100vh; } </style> </head> <body> <div id='map'></div> </body> <script src='https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.js'></script> <script> mapboxgl.accessTok...
Post a Comment
Read more