javascript - 3d轮播特效
本文介绍了javascript - 3d轮播特效的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
在网上看到一个特效，想学习做一下，不过为什么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>
<div class="wrap">
<div class="contain" id="contain">
</div>
</div>
<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试试:
backface-visibility: hidden;这篇关于javascript - 3d轮播特效的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
