How to make a 3D Cube using HTML CSS| DSC VIT

#shorts #dscvit #html #css #3dcube
Looking to spice up your website with cool animations but not know any libraries to do so? Prakhar has got your back. Learn how to implement a 3D cube animation without the hassle of using any complex libraries, just plain ol' CSS!

[glo_omi]

for those wondering what to add to @keyframes i made an example(experiment by changing values)
@keyframes cubeRotate {
0% {
transform: rotateY(0deg) rotateX(0deg);
}
25%
{
transform: rotateY(-180deg) rotateX(-90deg);
}
50%
{
transform: rotateY(-390deg) rotateX(-200deg);
}
75%
{
transform: rotateY(-560deg) rotateX(-120deg);
}
100%
{
transform: rotateY(-720deg) rotateX(0deg);
}
}
however if you want to make it interactive with mouse i think (but not 100% certain) you will need to add javascript, add an eventlistener which determines what the cursor coordinates are with a timed loop that iterates very quickly and updates the css with dom manipulation accordingly.

[INTERESTING_Plus]

Done, finally I made this😁
Thank you

[davidtomic]

on the beginning you sound like you're rapping with the music and all : )

[cyancaelus]

Please. I Want To See a 3D Game Engine Written in Pure HTML Programming Language and I Want To See a 3D Game Engine Written in Pure CSS Programming Language

[davidtomic]

wtf, where is @keyframes cubeRotate code and where is .top code?