My boyfriend been stuyding code and he was so excited to show me your video and told me how easy to understand by watching your videos. Best of luck ! 🥰
Programs are so "figure our stuff out"... first. Whereas the CSS and your help, is so direct and to the point. Thanks! Upvoted, subbed and hope you get a million more views!
Wow i just noticed the subs and views i thought this was some big channel probably, what a video, post more man you'll get far for sure thankyou for the explanation nice video
holy fuck this was so frigging GOOD! MAN! thank you so much! perspecitive is literally one of those properties which must be learned visully, not from the books
I have never saw more simpler explanation about any topic in web dev, visualision makes 90% of this probably
That was so friggin cool! As someone who is a visual learner, having the visualization change as you explain it really helped. Awesome video.
Man this couldnt be explained better. Total Support to bro
Appreciate it!
Subscribed! The quality of this video is simply amazing, wish I could do more than subscribe lol.
The box stays the same because you lack perspective. 😥😥😥
Howwwww!?
This is so cool! It's weird to listen to you in YT though 😁
My boyfriend been stuyding code and he was so excited to show me your video and told me how easy to understand by watching your videos. Best of luck ! 🥰
Don't lose him or I'll lose faith in coding
visually stunning, professionally produced content! thank you man!
Totally awesome🎉 Great man❤
Thank you! This helped me a lot with an exercise I have to do!!
Need more css explanation like this, plz!
Programs are so "figure our stuff out"... first. Whereas the CSS and your help, is so direct and to the point. Thanks!
Upvoted, subbed and hope you get a million more views!
Wow! great content. Congrats and keep the good work!
why bro not posting more vids like these? They are quite literally what most of us are looking for when searching for things like these.
Working on it!
This cube made me want to practice and understand things :D
Wow i just noticed the subs and views i thought this was some big channel probably, what a video, post more man you'll get far for sure thankyou for the explanation nice video
The quality of your video is top notch. Really like it!! Wish u the best and i would love to see more video from u
simple straight forward explaination
this was so cool!!!. thanks for teaching us this. I was very confused, all solved with this one video
That was so cool and easy to understand ❤
Explanation is so good 💯 i loved it ❤️ the way of visual explanation is awesome 🤩 please more video
U will grow far💫
wow , You just explained it so easy and good! Thank you for this useful video.
Thank you.....,thank you so much.....🥺🥺🥺🥺
holy fuck this was so frigging GOOD! MAN!
thank you so much! perspecitive is literally one of those properties which must be learned visully, not from the books
easy to understand, thanks you so much!
most valuabe tutorial who study css! Thanks for detailed tutorial :)
highly underrated.
I can't wait for more videos!
this is a super good video
Please sir..continue this 3d css video series. ❤❤
Great video bro ❤❤
thanks for making it easy. you're cool
This video deserve at least 10m views
Why 10m views why not 20m😡😡
i love you so much
Thanks sir! That's amazing
all hell broke lose when I started to code and implement this
Good way of explaining!
wow amazing ❤❤❤
Well done, thanks!
THIS IS GOLD
Y they are not putted down opacity for rotations ??
part 2?
Will you make more videos in the future?
yep
@@craftingon AWESOME!!! I'll stay tuned for more
Damn nice
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #222222;
display: flex;
align-items: center;
justify-content: center;
}
@-webkit-keyframes rotate-cube {
0% {
transform: rotateX(45deg) rotateY(45deg);
}
25% {
transform: rotateX(-45deg) rotateY(45deg);
}
50% {
transform: rotateX(-45deg) rotateY(-45deg);
}
75% {
transform: rotateX(45deg) rotateY(-45deg);
}
100% {
transform: rotateX(45deg) rotateY(45deg);
}
}
@keyframes rotate-cube {
0% {
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
100% {
transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
}
}
.cube {
margin-top: 200px;
transform-style: preserve-3d;
perspective: 12000px;
position: relative;
width: 250px;
height: 250px;
/* border: 1px solid #ececec; */
border-radius: 10px;
color: #ececec;
animation: rotate-cube 10s infinite linear;
-webkit-animation: rotate-cube 10s infinite linear;
}
.side {
position: absolute;
width: 250px;
height: 250px;
}
.front.side {
background-color: #a85c5c;
transform: translateZ(125px);
}
.back.side {
background-color: #a27979;
transform: translateZ(-125px);
}
.right.side {
background-color: #5a0404;
transform: translateX(125px) rotateY(90deg);
}
.left.side {
background-color: #444343;
transform: translateX(-125px) rotateY(-90deg);
}
.top.side {
background-color: #ebe8e8;
transform: translateY(-125px) rotateX(90deg);
}
.bottom.side {
background-color: #3e1c1c;
transform: translateY(125px) rotateX(-90deg);
}
A bit more styled :D
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #222222;
display: flex;
align-items: center;
justify-content: center;
}
@-webkit-keyframes rotate-cube {
0% {
transform: rotateX(45deg) rotateY(45deg);
}
25% {
transform: rotateX(-45deg) rotateY(45deg);
}
50% {
transform: rotateX(-45deg) rotateY(-45deg);
}
75% {
transform: rotateX(45deg) rotateY(-45deg);
}
100% {
transform: rotateX(45deg) rotateY(45deg);
}
}
@keyframes rotate-cube {
0% {
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
100% {
transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
}
}
.cube {
margin-top: 200px;
transform-style: preserve-3d;
perspective: 12000px;
position: relative;
width: 250px;
height: 250px;
/* border: 1px solid #ececec; */
border-radius: 10px;
color: #ececec;
animation: rotate-cube 10s infinite linear ease-in-out;
-webkit-animation: rotate-cube 10s infinite linear;
}
.side {
position: absolute;
width: 250px;
height: 250px;
border-radius: 12px;
border: 1px solid #ececec;
opacity: 0.9;
font-size: 2rem;
display: flex;
align-items: center;
justify-content: center;
}
.front.side {
background-color: #3a3939;
transform: translateZ(125px);
}
.back.side {
background-color: #3a3939;
transform: translateZ(-125px);
}
.right.side {
background-color: #3a3939;
transform: translateX(125px) rotateY(90deg);
}
.left.side {
background-color: #3a3939;
transform: translateX(-125px) rotateY(-90deg);
}
.top.side {
background-color: #3a3939;
transform: translateY(-125px) rotateX(90deg);
}
.bottom.side {
background-color: #3a3939;
transform: translateY(125px) rotateX(-90deg);
}
HTML
CSS 3D transforms
Front Side
Back Side
Left Side
Right Side
Top Side
Bottom Side
I m 100 follower