How we can create 3D visual blocks or elements using HTML CSS JS? Solution: See this program 3D Visualization Elements on Hover Using Pure HTML and CSS, 3D Blocks Design.
Previously I have shared some 3D related programs, but this for show or visualize 3D elements on hover. Basically, 3D stands for three-dimensional graphics, which means 3 sides visible of the elements. Mostly we heard 3D in graphic fields, rarely heard about it in web design or development. But we can create 3D items like blocks, any shape, text, etc with help of HTML5 & CSS3.
Today you will learn to create 3D Blocks presentation on mouseover. Basically, there are 6 rectangular blocks with text, all the box is placed over a big block. There also has multi-level placement, like some elements are inside 2 or more blocks. When you will hover on any element, it will reveal to the upside with a 3D effect. You can see 3 sides of the block with a cool color opacity effect to visualize each box specifically.
So, Today I am sharing 3D Visualization Elements on the Hover program. There I have used normal HTML, CSS, there I have not JS or any JavaScript library. The 3D visuals are based on CSS3 and its pre-built commands like transform, transition, perspective, etc. This a good example for beginners, who are learning HTML and CSS. Also, you can use this program on your project, as it is or after some modifications.
If you are thinking now how these 3D blocks actually are, then see the preview given below.
Preview Of 3D Blocks Reveal on Hover
See this video preview to getting an idea of how this design looks like.
Now you can see this visually, also you can see it live by pressing the button given above. If you like this, then get the source code of its.
You May Also Like:
3D Visualization Elements on Hover Using HTML and CSS Source Code
Before sharing source code, let’s talk about it. First I have created a main div named container, and a heading. Inside the container div, I have placed another div and elements like heading, text, section, footer, etc to create the basic website tree. There the layout is based on HTML, other works handled by CSS.
Now using CSS, I have placed all the elements in the right place as you can see in the preview. There I have used CSS variables to store value and pass values in commands easily. I have used CSS transform-style: preserve-3d; to creating 3D elements, and mostly used transform and transition command.
Left all other things you will understand after getting the codes, there are little tricky CSS codes. For creating this program you have to create only 2 files, one for HTML and one for CSS. Follow the steps to creating this without any error.
index.html
Create an HTML file named ‘index.html‘ and put these codes given below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<!DOCTYPE html> <!-- Code By Webdevtrick ( https://webdevtrick.com ) --> <html lang="en" > <head> <meta charset="UTF-8"> <title>3D Visualization | Webdevtrick.com</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="style.css"> </head> <body> <h1 class="title">Hover the elements</h1> <div class="container"> <div> <p>Header Section</p> <section> <header> <h1>H1 in section header</h1> </header> <p>Paragraph in section</p> <footer> <p>Paragraph in section footer</p> </footer> </section> <p>Footer Section.</p> <p>Copyright Section.</p> </div> </div> </body> </html> |
style.css
Now create a CSS file named ‘style.css‘ and put the codes given here.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 |
/* Code By Webdevtrick ( https://webdevtrick.com ) */ :root { -webkit-perspective: 500vmin; perspective: 500vmin; --side-height: 1.5em; --default-color: rgba(255, 66, 66, .2); --hover-color: rgba(230, 0, 39, .2); --transform-duration: .3s; } body { min-height: 100vh; font: normal 1em/1.4 helvetica, sans-serif; display: flex; justify-content: center; align-items: center; flex-direction: column; } .title { font: 100 2em/1.5 helvetica, sans-serif; } .container { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: rotateY(-40deg) rotateX(40deg); transform: rotateY(-40deg) rotateX(40deg); } .container * { display: block; padding: 1em; margin: .5em; position: relative; background: var(--default-color); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: translateZ(0); transform: translateZ(0); transition: -webkit-transform var(--transform-duration); transition: transform var(--transform-duration); transition: transform var(--transform-duration), -webkit-transform var(--transform-duration); } .container *::before, .container *::after { content: ""; display: block; position: absolute; background: transparent; transition: all var(--transform-duration); } .container *::before { width: 100%; height: var(--side-height); left: 0; bottom: 0; -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-transform: scaleY(0) rotateX(90deg); transform: scaleY(0) rotateX(90deg); } .container *::after { width: var(--side-height); height: 100%; right: 0; top: 0; -webkit-transform-origin: right center; transform-origin: right center; -webkit-transform: scaleX(0) rotateY(-90deg); transform: scaleX(0) rotateY(-90deg); } .container *:hover { background: var(--hover-color); -webkit-transform: translateZ(var(--side-height)); transform: translateZ(var(--side-height)); } .container *:hover::before, .container *:hover::after { background: var(--hover-color); } .container *:hover::before { -webkit-transform: scaleY(1) rotateX(90deg); transform: scaleY(1) rotateX(90deg); } .container *:hover::after { -webkit-transform: scaleX(1) rotateY(-90deg); transform: scaleX(1) rotateY(-90deg); } .container *:empty { display: none; } |
That’s It. Now you have successfully created 3D Visualization Elements on Hover Using HTML and CSS, 3D Blocks Design. If you have any doubt or question comment down below.
Thanks For Visiting, Keep Visiting.
