Вращение CSS3 и масштабирование на тех же элементах портят "z-index"? - PullRequest
Новая
       27

Вращение CSS3 и масштабирование на тех же элементах портят "z-index"?

3 голосов
/ 15 сентября 2011

Не совсем z-index, но я нашел, что лучше всего описать проблему в коротком заголовке ...

См. Этот упрощенный пример:

http://jsfiddle.net/sCnDx/

Если вы наводите курсор на изображения, вы заметите, что некоторые углы находятся ниже других изображений.

Если вы удалите код, относящийся к ротации, все будет работать нормально .. Так что проблема в том, что ротация или как она взаимодействует с масштабированием.

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

Можно ли что-то сделать с этим или это ошибка браузера?

(Проверено в сафари)

Спасибо, Уэсли

Ответы [ 2 ]

8 голосов
/ 15 сентября 2011

@ wesley giv e position:relative к вашим изображениям, подобным этому: 

    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;
}

, потому что z-index работает только на position relative, absolute & fixed.

отметьте эту скрипку http://jsfiddle.net/sandeep/sCnDx/3/

1 голос
/ 15 сентября 2011

Z-index у меня работает.http://jsfiddle.net/GY4Jp/

добавить в imgположение: относительное;z-индекс: 1;

добавить в img: hoverположение: относительное;z-индекс: 2;

...