Half selectable div when transformed with CSS

Question

When I transform a div with CSS transforms, the text and/or links in that div are only selectable in the left half of the div.

I've created a simple sample of the problem I have:

Does anyone have a solution to make the whole text/links clickable? The full link gets clickable whhen the rotateY is removed:

-webkit-transform: rotateY(30deg);

Not answering your question, but a block level element (`
`) cannot be within your anchor (``). Do it the other way around — `
text
` — Daze, Apr 23 '14 at 09:40
@Daze - just for the record - in html5 block elements ARE allowed within anchors [Are block-level elements allowed inside inline-level elements in HTML5?](http://stackoverflow.com/questions/6061869/are-block-level-elements-allowed-inside-inline-level-elements-in-html5) — Danield, Apr 23 '14 at 09:44

score 0 · Accepted Answer · answered Apr 23 '14 at 09:43

0

if you remove

 -webkit-transform-style: preserve-3d;

the link is fully clickable (and visually there's no difference in the demo w/wo this property set).

answered Apr 23 '14 at 09:43

Fabrizio Calderan

1 Answers1