Want to create 3d animation for logo which consist of 5 box.
Logo is box type, and I wanted to pop in and out in 3d manner using html css and JavaScript, I have tried but not able to implement that. Anyone can you please help me?
13 Replies
It will be quite simple in threejs or spline
Though I think it's possible to do with it just css, i wouldn't prefer it for production use
nah, this shading is nearly impossible to do with css.
@Aoi could you please share the code? I have tried in many ways but didn't able to create.
Or any person who can implement it in three js OR spline.
I made it in figma, here is the link. I have only used
box-shadow for the whole shading so it can be easily converted to css. Though it doesn't look exactly look like the image but this is the best i got with using only shadows.
All cubes are animating... One by one... In z direction
3D animation.
As so all cube's shadows are also should change
that is a really big ask. I'd suggest you try some threejs tutorials
this is a place to get help when you're stuck, not to have others make your portfolio for you
oh, not possible in css (for production use)
You should try out threejs, we are here to help if you get stuck
Don't know much three js and it is urgent.
It would be better if you can just create and send for one cube.
"urgent" is unfortunately not our problem. If you need urgent help with something that's a lot of work, I would suggest you look elsewhere to hire someone
emphasis on elsewhere though, we do not allow hiring / paying for help at all on this server
(not that you're unwelcome here obviously, just keep in mind everyone here volunteers their time and that demands like "make this for me" aren't a good fit for this help forum)
Also it won't take much time to make this in threejs, since these are just basic cubes. It's much better if you try it yourself.
Understood.
Okay.
You could change the size of the shadows as part of the animation. It won't be an accurate representation of what real shadows would do, but it could be close enough to be acceptable.
Hmm with only css it is not possible