CSS3 Rotation and Scaling on same elements messes up "z-index"?

Question

Not really the z-index, but I found that best to describe the issue in a short title...

See this simplified example:

http://jsfiddle.net/sCnDx/

If you hover over the images, you will note that some of the corners are below other images.

If you remove the code pertaining to the rotation, all is working fine.. So the problem is that rotation or how it interacts with the scaling.

-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-o-transform: rotate(10deg);
transform: rotate(10deg);

Is there anything that can be done about this or is this a browser bug?

(Tested in safari)

Thanks, Wesley

Solution 1

@wesley giv e position:relative to your images like this :

    img {
        -webkit-transform: rotate(10deg);
        -moz-transform: rotate(10deg);
        -o-transform: rotate(10deg);
        transform: rotate(10deg);

        -webkit-transition: -webkit-transform .15s linear;
        -moz-transition: -moz-transform .15s linear;
        -o-transition: -o-transform .15s linear;
        transition: transform .15s linear;
        position:relative;
    }
a img:hover {
    -webkit-transform: scale(1.25) !important;
    -moz-transform: scale(1.25) !important;
    -o-transform: scale(1.25) !important;
    transform: scale(1.25) !important;
    position: relative;
    z-index: 2;
}

because z-index only work on position relative, absolute & fixed.

check this fiddle http://jsfiddle.net/sandeep/sCnDx/3/

Solution 2

Z-index works for me. http://jsfiddle.net/GY4Jp/

add to img
position: relative;
z-index: 1;

add to img:hover
position: relative;
z-index: 2;