HARUN PEHLİVANIf the work I've been putting out since early 2012 has helped you in any way or you just like it and you wish me to be able to continue putting out stuff, please consider one of the following:
- being a cool cat 😼🎩 and becoming a patron on Patreon
- making a one time donation via Ko-fi
- getting me something off my Amazon WishList
- or at least sharing this to show the rest of the world what can be done with CSS these days
Thank you!
Hover the molecules (scroll to see all). Quick and dirty. Code could have looked better.
Uses nested 3D transformed elements (transform-style: preserve-3d) ➾ does not work in IE10. Uses animations on pseudo-elements ➾ does not work in Safari, Chrome 25 or older and IE9.
That's the theoretical support. Practical support...
Tested and works in Chrome 27, Firefox 22 on Windows 7, Chrome 26 on Linux. Does not seem to work in Chrome 27 on Windows XP.
Issues:
- Annoying flickering on hover in Chrome, as if it tried to get back to its original position.
- Wrong molecules on top problem in Firefox. Hmmm, this one seems to happen only in full page or live view. No problem in Editor or Details.
I would be really grateful if anyone could help with these.
There are workarounds for both IE10 and Safari.
For IE10, I could chain the transforms on one level, but that would also involve one set of keyframes per atom and it is not a solution I would use with so many molecules on one page.
For Safari, I could simply use an inner element instead of a pseudo-element. Again, something I was not going to do with so many elements on the page.
I do plan to create separate demos for individual molecules in order to better explain how this was done and implement these workarounds.
Edit: Did a simplified demo which also works in Safari and IE10. However, for more complicated molecules, taking care of IE might get really hairy.
Yes, the molecules represented here really exist. The structures and the bond angles are mostly real (excepting maybe some computational errors and data I was not able to find on the internet so I used the values of a typical structure of the kind). Everything is computed from the data (either well documented or just assumed) for each molecule.
Feel free to ask for other molecules if you can provide a visual 3D model and bond angles.
Inspired by
