CSS 3 Perspective and z-index incompatibility

守給你的承諾、 提交于 2019-12-20 04:06:22

问题


i have an slider and for cube effect i use css3's perspective:xxx; But when my element get value of perspective it and child elements loose added them z-index values, so mi images appearing in bottom of other elements.

element.style {
-webkit-perspective: 1000px;
}

I have removed given value of element after effect and it bring z-index values back .. but with other reason i cant remove it. So what can i do to not let to perspective affect on z-indexes ?

Here is an example http://prognozplus.ru/144/ As you can see after first effect image loose the pointer cursor because other transparent elements covering it. Find class="huge_it_slide_bg" element and remove perspective style and pointer will appear again.


回答1:


Since i was free. i made a cube effect maybe what you were looking for so take a look i am sure you will find code that can help you out in whatever else effect you are trying to get.

demo

http://jsfiddle.net/techsin/nbed7/

$('input[type=range]').change(function (e) {
    $('.box').css('transform','rotateY('+($(this).val()/100)*360+'deg) rotateX(20deg)');
});


来源:https://stackoverflow.com/questions/22593793/css-3-perspective-and-z-index-incompatibility

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!