how to create a cubic video animation using html and css
Cubic Video Animation |html & css|
note: SOURCE CODE & THE OUTPUT WILL BE GIVEN AT THE END OF THE ARTICLE.
 |
| Cubic Video Animation |
Hello guys.I have been here today with another dynamic article about creating UI designed CUBIC VIDEO ANIMATION using Html and Css. It's really simple by following this tutorial.
Here these are the steps to get the correct result .plz follow the steps one by one
Step 1- first of all write the basic code of html
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
So for that im going to write the create a section in which it can contains a division named cube and in that i have included another div .in that division you have to include or write a span or else an block level element which can help to produce a video.The code for the above explanation is given below.
note: In the video tag controls attribute sholud not be contained ,And in the presence of controls we have to include "muted" and "autoplay" "loop" properties.
<section id="main">
<video src="C:\Users\MADASRI\Downloads/fff.mp4" muted="" controls autoplay="" loop=""></video>
<div class="cube">
<div>
<header><video src="C:\Users\MADASRI\Downloads/fff.mp4" autoplay="" muted="" loop=""></video></header>
<header><video src="C:\Users\MADASRI\Downloads/fff.mp4" autoplay="" muted="" loop=""></video></header>
<header><video src="C:\Users\MADASRI\Downloads/fff.mp4" autoplay="" muted="" loop=""></video></header>
</div>
</div>
</section>
note: In the video tag controls attribute sholud not be contained ,And in the presence of controls we have to include "muted" and "autoplay" "loop" properties.
Observe the code ,here we have included a section in which it can contians a div in that cotains a sub division and the sub dividion contains a block level element
Step 3 - We have to write the css code for the cubic video animation
Now im going to make some basic attributions like including margin and padding to the whole body by using the code
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
Now its time to edit the section and divisions of the html codeHere im taking the section's height to be 100vh and width to be 100% and the position of the section will be relative
section {
width: 100%;
height: 100vh;
position: relative;
}
section .cube {
width: 400px;
height: 400px;
top: calc(50% - 200px);
left: calc(50% - 200px);
position: absolute;
transform-style: preserve-3d;
}
Now we have to write the code for making the sides of the cube to rotate and we making all this because the cube phases should be align just like a cube.
section .cube div {
top: 0;
left: 0;
position: absolute;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transform: rotateX(-20deg) rotateY(25deg) translate3d(-75px, -50px, 150px);
}
Step 4 - Now we have to create the cube with a video embed in it.
So for that consider the header tag and edit the css. Here took the position ,height and width to be as same in above and the main ones to change is that we have to add background color and a border to the side of the cube.And we have to include that the display property should be block for the side of the cube.
section .cube div header {
width: 100%;
height: 100%;
top: 0;
left: 0;
display: block;
border: 1px solid rgba(0, 0, 0, .1);
background: #ccc;
position: absolute;
}
<header><video src="C:\Users\MADASRI\Downloads/fff.mp4" autoplay="" muted="" loop=""></video></header>
After giving the video source in the header tag .The output will be more clumsy and mess.so for that we have to make it beautiful...lets go fo it.here im taking the "section .cube div header video" tag in css and making the video to be fit to the cube faces.so for that we have to include the object fit property as shown below.
section .cube div header video {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
object-fit: cover;
filter: blur(0px);
}
So for that we have to consider the ":nth childs " of the header tags and have to align the angles with writing deg to them.For more clearence we will go depth in this 5th step with sub steps.
*step 1
here consider the :nth child 1 and transform property should have the rotate X as 0deg & and the translate 3d should have 0,0, 200px
*step 2
here consider the :nth child 2 and transform property should have the rotate Y as 90deg & and the translate 3d should have 0,0, -200px
*step 3
here consider the :nth child 3 and transform property should have the rotate X as 90deg & and the translate 3d should have 0,0, 200px
section .cube div header:nth-child(1) {
transform: rotatex(0deg) translate3d(0, 0, 200px);
}
section .cube div header:nth-child(2) {
transform: rotateY(90deg) translate3d(0, 0, -200px);
}
section .cube div header:nth-child(3) {
transform: rotatex(90deg) translate3d(0, 0, 200px);
}
we have to make the video to be played with the cube in the backgroud having a blur effect.we are going to do that.consider the :nth child 2 and paste it under 2nd child and here you have to include "video" in the tag line.after including "video" in the tag line apply transform property as rotateY(180deg) for that it should be linear in shape.
section .cube div header:nth-child(2) video {
transform: rotateY(180deg);
}
Now the video is playing with the cube.But have some problem with that is , a blur effect on backgroud is missing .Lets add it by using filter property with a value of 20px and remember that "object fit" property will be "cover" .
section video {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
object-fit: cover;
filter: blur(20px);
}
The output will be looks like this:
Download the source Code here:
click here to download source code
If you are interested in learning more about technology and coding and ethical hacking tips and tricks ,join in our official whatsapp group with this link provided below.
click here to join in our whatsapp group.
this article was inspired and learned at online tutorials YT
yours dinesh.
No comments: