Good work @Worie 👍 . We want more features like this from you.

@Worie I had to revert this PR as this breaks the positioning of the highlight div in case the target element is transformed with rotate function.

The highlight area of div containing "ARCHITECTURE" is not positioned correctly.

Thanks for the feedback.

I know that there was an issue with borders when transforming an element, but I haven't seen any problems with rotate @swmitra , nor I'm sure how the site provided by @saurabh95 was implemented. Can you guys please give me a snippet with code which generates those issues?

I've got a solution for border issue locally, too, so perhaps this would solve those two - shall I create another PR with my current implementation, or simply commit the changes here?

transform-origin is used in the above site

#architecture .section-title { position: absolute; z-index: 5; -webkit-transform: rotate(90deg); -webkit-transform-origin: right bottom; transform: rotate(90deg); transform-origin: right bottom; right: 6.5%; top: 43.5%; left: auto; padding: 0 0 0 212px; margin: 0; text-transform: uppercase; }

Right, this property wasn't copied from original element to the highlight div so it had to be misaligned, now it should look good (at least on OSX Sierra).
I've pushed my local changes, so I guess I'll create another PR, since this is closed/merged.

@Worie Great 👍 . You can use this branch itself, but raise a new PR.