I saw this code pen of an octagon (wrongly called hexagon) turning into a square when hovered on. I wanna recreate that on a 300px sized hexagon, but I’ve had trouble knowing what exactly it is that makes the transformation.
What’s actually happening is that the internal (bubble) div is rotating. The reason you can’t see the ‘cut-off’ corners is due to the overflow being hidden on the parent div.
I’ve removed that and put a border on the parent so you can see what is actually happening.