Question

When trying to apply a CSS transform with perspective I encounter a weird glitch in that the top half of the divs are unselectable. I have created a a quick demo here on jsfiddle

[The top selection of red boxes should be clickable and such]

Does anyone know how to fix this? I’ve looked at other similar errors but their solutions don’t seem to work here.

Cheers

Answer 1

This should do the trick

.ca-item { 
-webkit-transform: skewX(-5deg) scale(1, 1);
-moz-transform: skewX(-5deg) scale(1, 1);
-ms-transform: skewX(-5deg) scale(1, 1);
transform: skewX(-5deg) scale(1, 1);
background-color: blue;
position:relative;
width:1060px;
height:550px;
text-align:center;
}