3D盒子翻转焦点图

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了3D盒子翻转焦点图相关的知识，希望对你有一定的参考价值。

 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script language="javascript">
    window.onload=function(){
        var ulDom=document.getElementById("ulBox");
        var liObj=ulDom.getElementsByTagName("li");
        var leftBtn=document.getElementById("leftDiv");
        var rightBtn=document.getElementById("rightDiv");
        var deg=0;
        var exps=null;
        var info=null;
        var num=null;
        leftBtn.addEventListener("click",auto,false);
        rightBtn.addEventListener("click",auto,false);
        function auto(){
            var btnStr=this.getAttribute("id");
            if(btnStr == "leftDiv"){
                info=setInterval(leftImg,8);    
            }else{
                info=setInterval(rightImg,8);
            }
            this.removeEventListener("click",auto,false);
            console.log();
        }
        function leftImg(){
            deg=deg+1;
            exps=deg / 90;
            num=parseInt(exps)+1;
            if(isNum(exps)){
                clearInterval(info);
                leftBtn.addEventListener("click",auto,false);
            }else{
                ulDom.style.transform="rotateX("+deg+"deg)";
            }
        }
        function rightImg(){
            deg=deg-1;
            exps=deg / 90;
            num=parseInt(exps)+1;
            if(isNum(exps)){
                clearInterval(info);
                rightBtn.addEventListener("click",auto,false);
            }else{
                ulDom.style.transform="rotateX("+deg+"deg)";
            }
        }
        //是否为整数
        function isNum(s){  
            var type = "^-?\\d+$";  
            var re = new RegExp(type);    
            return re.test(s)  
        }
    }
</script>
<style type="text/css">
    html,body {padding: 0px;margin: 0px;font-family: "微软雅黑";background: #ccc;}
    .boxDom {
        margin: 100px auto;
        perspective:2000px;
        width:600px;
        height: 300px;
    }
    .boxDom ul {
        padding: 0px;
        position: relative;
        top: 0px;
        bottom: 0px;
        margin: auto;
        width:600px;
        height: 300px;
        list-style:none;
        font-size: 0px;
        transform-style:preserve-3d;
        -webkit-transform-style:preserve-3d;
        -moz-transform-style:preserve-3d;
        -ms-transform-style:preserve-3d;
    }
    .boxDom ul li {
        position: absolute;
        top: 0px;
        left: 0px;
        border:2px solid #fff;
    }
    .imgOne {
        transform:translateZ(150px);
        -webkit-transform:translateZ(150px);
        -moz-transform:translateZ(150px);
        -ms-transform:translateZ(150px);
    }
    .imgTwo {
        transform: translateY(-150px) rotateX(90deg);
        -webkit-transform: translateY(-150px) rotateX(90deg);
        -moz-transform: translateY(-150px) rotateX(90deg);
        -ms-transform: translateY(-150px) rotateX(90deg);
    }
    .imgThree {
        transform: translateZ(-150px) rotateY(180deg);
        -webkit-transform: translateZ(-150px) rotateY(180deg);
        -moz-transform: translateZ(-150px) rotateY(180deg);
        -ms-transform: translateZ(-150px) rotateY(180deg);
    }
    .imgfour {
        transform: translateY(150px) rotateX(270deg);
        -webkit-transform: translateY(150px) rotateX(270deg);
        -moz-transform: translateY(150px) rotateX(270deg);
        -ms-transform: translateY(150px) rotateX(270deg);
    }
    .boxDom div {
        background:rgba(0,0,0,.6);
        width:80px;
        height:80px;
        border-radius: 50%;
        position: absolute;
        top: 0px;
        bottom:0px;
        margin: auto;
        text-align: center;
        font-size: 3em;
        line-height: 1.5em;
        color: #fff;
        cursor: pointer;
    }
    .left {left:0px;}
    .right {right:0px;}
</style>
</head>

<body>
<div class="boxDom">
    <ul id="ulBox">
        <li class="imgOne"><img src="http://img.hoop8.com/attachments/1603/6952062172999.jpg" alt="" /></li>
        <li class="imgTwo"><img src="http://img.hoop8.com/attachments/1603/7232062172999.jpg" alt="" /></li>
        <li class="imgThree"><img src="http://img.hoop8.com/attachments/1603/7722062172999.jpg" alt="" /></li>
        <li class="imgfour"><img src="http://img.hoop8.com/attachments/1603/8132062172999.jpg" alt="" /></li>
    </ul>
    <div class="left" id="leftDiv"><</div>
    <div class="right" id="rightDiv">></div>
</div>
</body>
</html>

 

以上是关于3D盒子翻转焦点图的主要内容，如果未能解决你的问题，请参考以下文章

0069 3D呈现：transform-style案例两面翻转的盒子

3D盒子X轴翻转

jQuery 3D圆盘旋转焦点图 支持鼠标滚轮

css盒子模型层级3D图

CSS3实现炫酷游戏3D翻转动画制作

3D焦点图插件