I did a minimal CSS experiment with 3D rotating cubes, and mix-blend-mode (cool inversion effect) (lewisflude.com)
over 4 years ago from Lewis Flude, Designer
over 4 years ago from Lewis Flude, Designer
It looks cool! I'd add pointer-events: none;
on your cube-blend-layer
classes so you can click through them — right now your Twitter, Facebook and GitHub links are unclickable for me.
Very good shout! Through doing this little thing, I found some really weird bugs with Chrome. For some reason adding mix-blend-mode meant two of the three 3D transforms just wouldn't render.
Edit: All fixed now!
clever idea!
messed around with it a bit, and for some reason the cubes stop rotating when using color
and saturation
blend modes
It's quite funny how mix-blend-mode can interfere with 3D transforms. It seems like a real edge case, and in my experience Chrome seemed to be affected the worst. Safari was pretty easy to get up and running etc. The saturation mode seems like it'd be interesting for making things black & white selectively.
Amazing stuff.
Thanks! It's small and dumb, but I thought it was pretty cool.
Very cool idea! I'll probably steal it at some point :)
This is very inspiring, good work!
Clever, I like it.
Designer News
Where the design community meets.
Designer News is a large, global community of people working or interested in design and technology.
Have feedback?
Login to Comment
You'll need to log in before you can leave a comment.
LoginRegister Today
New accounts can leave comments immediately, and gain full permissions after one week.
Register now