css 3D 立方体banner

作者: xiaoaiai | 来源:发表于2017-08-03 21:48 被阅读0次

css 3D 立方体banner
css3基础点（1）
纯css3实现旋转3D立方体骰子
CSS3 3D盒子
css实现简单的3D效果
html5表白神器开发，做一个浪漫的程序员
3D立方体
Day05（demo 3d旋转 3d立方体立体轮播）
css3D旋转立方体
CSS3的 3D立方体旋转动画

1.png

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <title></title>
        <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            
            body {
                perspective: 1000px;  /*透视距离*/
            }
            p{text-align: center;}
            #warp{margin-top: 100px;}
            #banner {
                width: 300px;
                height: 300px;
                position: relative;
                margin: 0 auto;
                transition: all 1s;   /*css动画时间(jquery的animate不支持transform只能靠修改css实现动画效果，或者自己封装一个原生的cssTransform)*/
                transform-style: preserve-3d; /*父元素设为3d视图*/
                transform-origin: 50% 50% -150px;  /*3d中心点*/
                transform: rotateX(0deg) rotateY(0deg);
            }
            
            #banner div {
                position: absolute;
                width: 300px;
                height: 300px;
                text-align: center;
                line-height: 300px;
                opacity: .9;
            }
            
            #banner div:nth-child(1) {  /*上*/
                background: lavender;
                top: -300px;
                transform-origin: bottom;  /*设置旋转位置(沿底部X轴旋转)*/
                transform: rotateX(90deg);
            }
            
            #banner div:nth-child(2) {  /*下*/
                background: lightcoral;
                top: 300px;
                transform-origin: top;   /*设置旋转位置(沿顶部X轴旋转)*/
                transform: rotateX(-90deg);
            }
            
            #banner div:nth-child(3) {  /*前(不需要旋转)*/
                background: lemonchiffon;
                z-index: 99;
            }
            
            #banner div:nth-child(4) {  /*后*/
                background: lightcoral;
                transform: translateX(0px) translateZ(-300px) rotatey(180deg);  /*设置后面(沿Z轴进深)*/
                left: 0;
            }
            
            #banner div:nth-child(5) {  /*左*/
                background: lightcyan;
                left: -300px;
                transform-origin: right; /*设置旋转位置(沿右边Y轴旋转)*/
                transform: rotateY(-90deg);
            }
            
            #banner div:nth-child(6) {  /*右*/
                background: lightgrey;
                left: 300px;
                transform-origin: left;  /*设置旋转位置(沿左边Y轴旋转)*/
                transform: rotateY(90deg);
            }
            
        </style>
        <script type="text/javascript">
            $(function(){
                var index = 0;
                $('#next').on('click',function(){
                    index++
                    $('#banner').css({
                        transform:'rotateX(0deg) rotateY(-'+9*index+'0deg)'
                    })
                })              
            })
        </script>
    </head>
    <body>
        <div id="warp">
            <div id="banner">
                <div>上</div>
                <div>下</div>
                <div>前</div>
                <div>后</div>
                <div>左</div>
                <div>右</div>
            </div>
            <p><button id="next">next</button></p>
        </div>
    </body>
</html>