css3 3d 案列

最新推荐文章于 2024-09-15 23:04:16 发布

weixin_30886233

最新推荐文章于 2024-09-15 23:04:16 发布

阅读量91

点赞数

原文链接：http://www.cnblogs.com/fanmiaolan/p/9872268.html

版权

1、卡牌翻转

<!--卡牌反转-->
<div class="demo1">
    <div class="box">
        <div class="negative"></div>
        <div class="positive"></div>
    </div>
</div>

 .demo1{width: 200px;height: 300px;margin: 100px auto;}
 .demo1 .box{width:100%;height: 100%;position: relative;transform-style: preserve-3d;transition: transform 1s;cursor: pointer; animation:fanzhuan 2s infinite linear ;  }
 .demo1 .positive{width: 100%;height: 100%;position: absolute;background:url("image/positive.png") 0 0 no-repeat;background-size: 100% 100%;}
 .demo1 .negative{width: 100%;height: 100%;position: absolute;background:url("image/negative.jpg") 0 0 no-repeat;background-size: 100% 100%;transform:rotateY(180deg);}
 .demo1 .box:hover{ transform:rotateY(180deg); }
 @keyframes fanzhuan{
     0%{ transform:rotateY(0deg);  }
     100%{  transform:rotateY(360deg);  }
  }

效果图

2、立方体

<!--立方体-->
<div class="demo2">
    <div class="top"></div>
    <div class="bottom"></div>
    <div class="before"></div>
    <div class="after"></div>
    <div class="left"></div>
    <div class="right"></div>
</div>

 .demo2{width: 300px;height: 300px;margin: 20px auto;position: relative; -webkit-animation:xuanzhuan 5s infinite linear ; transform-style: preserve-3d;}
        .demo2 > div{background:url("image/cube.jpg") 0 0 no-repeat;background-size: 100%;width: 100%;height: 100%;position: absolute;top:0px;left: 0px; box-shadow: 1px 1px 10px #ffdecf;}
        .top{transform:rotateX(90deg)translateZ(150px);;}
        .bottom{transform:rotateX(-90deg)translateZ(150px);;}
        .before{ transform: translateZ(150px); }
        .after{transform: translateZ(-150px); }
        .left{transform:rotateY(-90deg)translateZ(150px);}
        .right{transform:rotateY(90deg)translateZ(150px);}
        @-webkit-keyframes xuanzhuan{
            0%{ -webkit-transform: rotateY(0deg);}
            50%{ -webkit-transform: rotateY(360deg);}
            51%{ -webkit-transform: rotateX(0deg);}
            100%{ -webkit-transform: rotateX(360deg);}
        }

效果图

3、旋转木马

<!--旋转木马-->
<div class="demo3">
    <div class="box"></div>
</div>

.demo3{width:200px;height:150px;margin:150px auto;perspective:800px;transform-style:preserve-3d;}
.demo3 .box{transform-style:preserve-3d;position:relative;width:100%;height:100%;animation:xuanzhuan2 5s infinite linear ;}
.demo3 .mian{width:100%;height:100%;position:absolute;}
.demo3 .box{transition:transform 1s;}
@keyframes xuanzhuan2{
     0%{ -webkit-transform: rotateY(0deg);}
     100%{ -webkit-transform: rotateY(360deg);}
}

<script src="jquery-1.8.3.js"></script>
<script>
    for(var i=0;i<9;i++){
        $('.demo3 .box').append('<div class="mian"></div>');
        $('.mian').eq(i).css({'transform':'rotateY('+i*40+'deg) translateZ(280px)','background':'url(image/rotate'+(i+1)+'.jpg)','background-size':'100% 100%'});
    }
    //上边的for循环是渲染舞台里演员
    var x=0;
    var y=0;
    $(window).keydown(function(event){
        var e = event || window.event || arguments.callee.caller.arguments[0];
        console.log(e)
        if(e && e.keyCode==37){ // 左
            y++;
            $('.demo3 .box').css({'transform':"rotateX("+x*20+"deg) rotateY("+y*40+"deg)"});
        }
        if(e && e.keyCode==39){ // 右
            y--;
            $('.demo3 .box').css({'transform':"rotateX("+x*20+"deg) rotateY("+y*40+"deg)"});
        }
        if(e && e.keyCode==38){ // 上
            x++;
            $('.demo3 .box').css({'transform':"rotateX("+x*20+"deg) rotateY("+y*40+"deg)"});
        }
        if(e && e.keyCode==40){ // 下
            x--;
            $('.demo3 .box').css({'transform':"rotateX("+x*20+"deg) rotateY("+y*40+"deg)"});
        }
    })
</script>

效果图

4、魔方效果

<!--魔方效果-->
<div class="demo4">
    <input type="button" class="btn" value="<"/>
    <div class="box"></div>
    <input type="button" class="btn" value=">"/>
</div>

.demo4{width:900px;height:300px;margin:100px auto 0;}
        .demo4 .box{width:604px;height:250px;transform-style:preserve-3d;perspective:800px;float:left;margin-left:103px;}
        .btn{height:40px;width:50px;color:#fff;background:#f5ff32;margin-top:105px;border:0px;font-size:30px;font-weight:700;}
        .btn:nth-of-type(1){float:left;}
        .btn:nth-of-type(2){float:right;}
        .kuai{float:left;width:100px;height:250px;transform-style:preserve-3d;position:relative;margin-left:-1px;}
        .demo4 .mian{width:100px;height:250px;position:absolute;}
        .kuai .mian:nth-of-type(1){transform:translateZ(125px);background:url("image/rotate1.jpg") no-repeat;background-size:600px 250px;}
        .kuai .mian:nth-of-type(2){transform:rotateX(-90deg) translateZ(125px);background:url("image/rotate2.jpg") no-repeat;background-size:600px 250px;}
        .kuai .mian:nth-of-type(3){transform:rotateX(180deg) translateZ(125px);background:url("image/rotate3.jpg") no-repeat;background-size:600px 250px;}
        .kuai .mian:nth-of-type(4){transform:rotateX(90deg) translateZ(125px);background:url("image/rotate4.jpg") no-repeat;background-size:600px 250px;}
        .kuai .mian:nth-of-type(5){ width:250px; height:250px; background:#000; transform:rotateY(-90deg) translateZ(125px);  }
        .kuai .mian:nth-of-type(6){ width:250px; height:250px; background:#000; transform:rotateY(90deg) translateZ(-25px);}

<script src="jquery-1.8.3.js"></script>
<script>
    var kuai=document.getElementsByClassName('kuai');
    for(i=0;i<6;i++){
        $('.demo4 .box').append('<div class="kuai"><div class="mian"></div><div class="mian"></div><div class="mian"></div><div class="mian"></div>'+
            '<div class="mian"></div><div class="mian"></div></div>');
        kuai[i].getElementsByClassName('mian')[0].style='background-position:'+-100*i+'px 0px';
        kuai[i].getElementsByClassName('mian')[1].style='background-position:'+-100*i+'px 0px';
        kuai[i].getElementsByClassName('mian')[2].style='background-position:'+-100*i+'px 0px';
        kuai[i].getElementsByClassName('mian')[3].style='background-position:'+-100*i+'px 0px';
    }
    //上边的for循环是渲染舞台里演员
    var x=0;
    var xuanzuan=setInterval(function(){
        x++;
        for(i=0;i<6;i++){
            for(i=0;i<6;i++){
                kuai[i].style='transition:transform 1s '+100*i+'ms;transform:rotateX('+90*x+'deg)';
            }
        }
    },4000)
    //上边的计时器是写让class是kuai的div旋转这个div的下标是几就让他延迟几毫秒
    $('.btn').eq(0).click(function(){
        x--;
        for(i=0;i<6;i++){
            kuai[i].style='transition:transform 1s '+100*i+'ms;transform:rotateX('+90*x+'deg)'
        }
    })
    //按下第一个按钮让class是kuai的div以上边计时器的方式运动不过方向相反
    $('.btn').eq(1).click(function(){
        x++;
        for(i=0;i<6;i++){
            kuai[i].style='transition:transform 1s '+100*i+'ms;transform:rotateX('+90*x+'deg)'
        }
    })
    //按下第二个按钮让class是kuai的div以上边计时器的方式运动
</script>