Master CSS transforms and perspective

No video

Master CSS transforms and perspective - Explained Visually

Рет қаралды 24,914

CraftingON

Күн бұрын

Пікірлер: 53

@xaiver3612 4 ай бұрын

I have never saw more simpler explanation about any topic in web dev, visualision makes 90% of this probably

@Radius11-g1k 17 күн бұрын

Man this couldnt be explained better. Total Support to bro

@craftingon 13 күн бұрын

Appreciate it!

@user-kf2qk4eu5f Жыл бұрын

That was so friggin cool! As someone who is a visual learner, having the visualization change as you explain it really helped. Awesome video.

@vukhanhtrangbui4251 5 ай бұрын

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 ! 🥰

@pranjalruhela1103 5 ай бұрын

Don't lose him or I'll lose faith in coding

@alii4334 6 ай бұрын

visually stunning, professionally produced content! thank you man!

@fireofenergy 7 ай бұрын

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!

@JeffersonVanegas2000 4 ай бұрын

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.

@craftingon 4 ай бұрын

Working on it!

@anupsuresh9103 7 ай бұрын

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

@xyves6327 6 ай бұрын

The box stays the same because you lack perspective. 😥😥😥

@Tussu17 6 ай бұрын

Howwwww!?

@chienthangoanmanh4933 5 ай бұрын

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

@klirmio21 9 ай бұрын

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

@demicheo 4 ай бұрын

Thank you! This helped me a lot with an exercise I have to do!!

@rokimiftah 6 ай бұрын

Need more css explanation like this, plz!

@user-yj6cv8xu4y 8 ай бұрын

this was so cool!!!. thanks for teaching us this. I was very confused, all solved with this one video

@bloque9.estrategiaseninter374 6 ай бұрын

Wow! great content. Congrats and keep the good work!

@boris7258 4 ай бұрын

This cube made me want to practice and understand things :D

@bhanu3189 6 ай бұрын

Explanation is so good 💯 i loved it ❤️ the way of visual explanation is awesome 🤩 please more video U will grow far💫

@nganji7932 7 ай бұрын

wow , You just explained it so easy and good! Thank you for this useful video.

@Law_platform 10 ай бұрын

most valuabe tutorial who study css! Thanks for detailed tutorial :)

@arvindcool7994 Жыл бұрын

That was so cool and easy to understand ❤

@user-sk7mz9ej4i 6 ай бұрын

simple straight forward explaination

@The-cyber-imbiber Ай бұрын

this is a super good video

@_whatistruth 3 ай бұрын

highly underrated.

@hariram5654 18 күн бұрын

Thank you.....,thank you so much.....🥺🥺🥺🥺

@Inbydev 3 ай бұрын

easy to understand, thanks you so much!

@dotwad11 8 ай бұрын

I can't wait for more videos!

@rifathasan-pl7pn 2 ай бұрын

This video deserve at least 10m views

@akbhai55 2 ай бұрын

Why 10m views why not 20m😡😡

@MangoBoxes 3 ай бұрын

Great video bro ❤❤

@MRNOVAChannel 7 ай бұрын

thanks for making it easy. you're cool

@rifaakter8463 3 ай бұрын

Please sir..continue this 3d css video series. ❤❤

@nainglinhtet3179 7 ай бұрын

Thanks sir! That's amazing

@bumblebee7688 Ай бұрын

i love you so much

@eiermaler_ 8 ай бұрын

I m 100 follower

@BFRule1 5 ай бұрын

wow amazing ❤❤❤

@shahidvohra2239 8 ай бұрын

Good way of explaining!

@lewisbrown2159 8 ай бұрын

THIS IS GOLD

@teleportkontrola2006 9 ай бұрын

Well done, thanks!

@pranjalruhela1103 5 ай бұрын

all hell broke lose when I started to code and implement this

@user-ht9sy4yc2e 7 ай бұрын

Y they are not putted down opacity for rotations ??

@shenzen_arena 3 ай бұрын

Will you make more videos in the future?

@craftingon 2 ай бұрын

yep

@shenzen_arena 2 ай бұрын

@@craftingon AWESOME!!! I'll stay tuned for more

@sjain6320 8 ай бұрын

Damn nice

@S3louk 3 ай бұрын

part 2?

@MarkoKozlica 2 ай бұрын

* { 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); }

@MarkoKozlica 2 ай бұрын

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); }

@MarkoKozlica 2 ай бұрын

HTML CSS 3D transforms Front Side Back Side Left Side Right Side Top Side Bottom Side