在网上看到一个特效，想学习做一下，不过为什么3d图片被后面的挡住了，我猜测是定位z-index的原因，但是自己琢磨了个把小时都解决不了，特求大神们解决，谢谢。
图片描述
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播</title>
<style id="style">
*{
margin:0;
padding:0;
}
.wrap{
width:1050px;
height: 300px;
perspective: 1500px;
-webkit-perspective: 1500px;
margin:50px auto 0px;
}
.contain{
width:100%;
height: 100%;
transform-style:preserve-3d;
-webkit-transform-origin:center center -150px;
-moz-transform-origin:center center -150px;
-ms-transform-origin:center center -150px;
-o-transform-origin:center center -150px;
transform-origin:center center -150px;
transform:rotateX(90deg) rotateY(0deg);
}
ul{
width:50px;
height: 300px;
position:relative;
float:left;
list-style:none;
}
li{
width:100%;
height: 100%;
position:absolute;
font-size:40px;
}
ul li:nth-of-type(1){
/*background-color: #666;*/
background-image:url('image/flash1.png');
}
ul li:nth-of-type(2){
background-image:url('image/flash2.png');
top:-100%;
-webkit-transform-origin:bottom;
-moz-transform-origin:bottom;
-ms-transform-origin:bottom;
-o-transform-origin:bottom;
transform-origin:bottom;
-webkit-transform: rotateX(90deg);
-moz-transform: rotateX(90deg);
-ms-transform: rotateX(90deg);
-o-transform: rotateX(90deg);
transform: rotateX(90deg);
}
ul li:nth-of-type(3){
/*background-color: #0f0;*/
background-image:url('image/flash3.png');
-webkit-transform: translateZ(-300px) rotateX(180deg);
-moz-transform: translateZ(-300px) rotateX(180deg);
-ms-transform: translateZ(-300px) rotateX(180deg);
-o-transform: translateZ(-300px) rotateX(180deg);
transform: translateZ(-300px) rotateX(180deg);
}
ul li:nth-of-type(4){
/*background-color: #00f;*/
background-image:url('image/flash4.png');
bottom:-100%;
-webkit-transform-origin:top;
-moz-transform-origin:top;
-ms-transform-origin:top;
-o-transform-origin:top;
transform-origin:top;
-webkit-transform: rotateX(-90deg);
-moz-transform: rotateX(-90deg);
-ms-transform: rotateX(-90deg);
-o-transform: rotateX(-90deg);
transform: rotateX(-90deg);
}
</style>
</head>
<body>
<p class="wrap">
<p class="contain" id="contain">
</p>
</p>
<script src="js/banner.js"></script>
</body>
</html>以下为js代码：
var cont=document.getElementById("contain");
var style=document.getElementById("style");
var num=1050/50;
var zIndex=0;
for(var i=0;i<num;i++){
cont.innerHTML+="<ul><li></li><li></li><li></li><li></li></ul>";
style.innerHTML+='#contain ul:nth-of-type('+(i+1)+') '+'li'+'{background-position:'+(-50*i)+'px 0}';
}
我猜想是少加了下面这个，它预设是可见(visible)，加在contain或wrap试试:
是不是因为你没有写back-visibility:hidden啊
推荐看下此人的博客
transform
确实是z-index的问题，已经解决了