DEV Community

Cover image for CSS 3D

CSS 3D

Yuriy Markov on November 24, 2019

Thanks to the @rolandcsibrei idea, I've updated this post. As a frontend developer, I'm working a lot with CSS. From time to time, I'm experim...
Collapse
 
i_samayorinde profile image
Sam Ayorinde{Blessed is He that Codes} 🇳🇬

Hello, for some reasons I can't explain, I can't say the chrome browser is not supporting transform-style but there's no 3d effect and the project is not visible.

Collapse
 
peacefullatom profile image
Yuriy Markov

Can you show me your code?

Collapse
 
i_samayorinde profile image
Sam Ayorinde{Blessed is He that Codes} 🇳🇬

Initially, I read the code, wrote it the way you did. I was thinking of writing in my own way but wanted to try yours out first.

Thread Thread
 
peacefullatom profile image
Yuriy Markov

Alright. Have you tried this demo gist.github.com/peacefullatom/6568... ?

Thread Thread
 
i_samayorinde profile image
Sam Ayorinde{Blessed is He that Codes} 🇳🇬

It worked. thanks.

Thread Thread
 
peacefullatom profile image
Yuriy Markov

You're welcome! 👍
If you have any questions, feel free to ask me.

Collapse
 
rolandcsibrei profile image
Roland Csibrei

Hey Yuriy, interesting topic! I am definitely going to try this out.

Collapse
 
peacefullatom profile image
Yuriy Markov

You are welcome! If you have any questions/improvements/anything else - just write to me!

Collapse
 
rolandcsibrei profile image
Roland Csibrei

I would consider adding perspective, so the further bars will look smaller.

Thread Thread
 
peacefullatom profile image
Yuriy Markov

Thank you! I've forgotten about this feature. I'll add it to the article and to the demo.

Collapse
 
i_samayorinde profile image
Sam Ayorinde{Blessed is He that Codes} 🇳🇬

Thanks for sharing. I will like to if I can this on my repo on github.

Collapse
 
peacefullatom profile image
Yuriy Markov • Edited

You are welcome! 👍
Only mention the source, if possible. Thanks in advance.

Collapse
 
i_samayorinde profile image
Sam Ayorinde{Blessed is He that Codes} 🇳🇬

Thanks for sharing. Can I put this on my github repo after trying it out?

Collapse
 
peacefullatom profile image
Yuriy Markov • Edited

Yes! 👍
Only mention the source, if possible. Thanks in advance.

Collapse
 
i_samayorinde profile image
Sam Ayorinde{Blessed is He that Codes} 🇳🇬

Ohhh...
Coolies!!

Thread Thread
 
peacefullatom profile image
Yuriy Markov

You are welcome!

Collapse
 
equinusocio profile image
Mattia Astorino

Good! If you use css custom properties you can save a lot of code.

Collapse
 
peacefullatom profile image
Yuriy Markov

Thank you!

Collapse
 
_morgan_adams_ profile image
morgana

Thanks for sharing! This derailed me from my other plans and got me tinkering with transforms :)

Collapse
 
peacefullatom profile image
Yuriy Markov

You are welcome!

Collapse
 
peacefullatom profile image
Yuriy Markov

Thank you @rolandcsibrei ! I've just updated this post. Hope you'll like it!