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:

Comments

Post a Comment

The Most Populer

create a NOTE app by HTML-JS | Design for note app | App challenge

 CREATING A STICKY NOTE APP WITH HTML AND JS WITH EXPLAIN IN HINDI Hello There..! Here is the sticky note app code of html . 👇👇👇👇👇👇 <!DOCTYPE html> <html>     <head>         <title>Clock + to-do app</title>         <script src="https://code.jquery.com/jquery-3.1.1.js"></script>         <script type="text/javascript">           function app(){ var today = new Date(); var date = today.getDate(); var montharr = ["January","February","March","April","May","June","July","August","September","October","November","December"]; var month = montharr[today.getMonth()]; var year = today.getFullYear(); $("#date").text(date + " " + month + "," + " " + year); var h = today.getHours(); var m = today.getMinutes(); var s = today.getSeconds(); var ampm = ""; if(h...
Post a Comment
Read more

Code for icon design | camera icon code | html-css code

 Camera ICON creation || Code for the camera icon  Here is the code for camera icon design..try with your efforts..! ICON #CODE : >>                <!DOCTYPE html> <html> <head> <title>Camera Icon Creation</title> <style type="text/css"> body{ margin:0; background-color: lightblue; } .outer{     width: 50%;     height: 100vh;     display: flex;     justify-content: center;     align-items: center;     margin: 0 auto; } .body{     background-color: white;     border-radius: 30%;     width: 11rem;     height: 11rem;     position: relative;     box-shadow: 1px 1px 6px 1px slategrey; } .red{     border-radius: 50%;     background-color: crimson;     width: 10px;     height: 10px;     position: absolute;     ...
Post a Comment
Read more

SideBar PLUS Icon with animation

SideBar PLUS Icon with Animation || POP UP icon Box || Icon Interaction in HTML                      Here is the best code for pop up icon box with the animation effect. These icons will be use in the many website for users attraction. Do the code now..! #CODE : --     <!DOCTYPE html> <html>     <head>         <title>Page Title</title>         <style type="text/css">             * {     margin: 0;     padding: 0;     box-sizing: border-box; } body {     display: flex;     justify-content: center;     align-items: center;     min-height: 100vh;     --light-color: #f8f9fd;     background: #FF6347; } .container {     position: relative;     display: flex;     flex-wrap: wrap; ...
Post a Comment
Read more