jquery和CSS3带倒影的3D万花筒旋转动画特效效果演示

<!DOCTYPE html>
<html>
        <head>
                <title></title>
                <meta charset='utf-8' />
                <script src='js/jquery.js'></script>
                <style>
                        .pic{
                            width: 120px;
                            height: 180px;
                            margin: 150px auto 0;
                            position: relative;
                            /*transform 旋转元素*/
                            transform-style:preserve-3d;
                            transform:perspective(800px) rotateX(-10deg) rotateY(0deg);
                        }
                        .pic img{
                            position: absolute;
                            width: 100%;
                            height: 100%;
                            border-radius: 5px;
                            box-shadow: 0px 0px 10px #fff;
                            /*倒影的设置*/
                            -webkit-box-reflect:below 10px -webkit-linear-gradient(top,rgba(0,0,0,0) 50%,rgba(0,0,0,.5) 100%);
                        }
                        .pic p{
                            width: 1200px;
                            height: 1200px;
                            background: -webkit-radial-gradient(center center,600px 600px,rgba(255,255,255,.5),rgba(0,0,0,0));
                            position: absolute;
                            top:100%;left:50%;
                            margin-top: -600px;
                            margin-left: -600px;
                            border-radius:600px;
                            transform:rotateX(90deg);
                        }     
                </style>
        </head>
        <body>
                <div class='box'>
                        <div class="pic">
                                <img src="image/1.jpg" />
                                <img src="image/2.jpg" />
                                <img src="image/3.jpg" />
                                <img src="image/4.jpg" />
                                <img src="image/5.jpg" />
                                <img src="image/6.jpg" />
                                <img src="image/7.jpg" />
                                <img src="image/8.jpg" />
                                <img src="image/9.jpg" />
                                <img src="image/10.jpg" />
                                <p></p>
                        </div>
                </div>
                <script>
                        $(function () {
                            var imgL = $(".pic img").size();
                            var deg = 360 / imgL;
                            var roY = 0, roX = -10;
                            var xN = 0, yN = 0;
                                    var play = null;
                                    $ (".pic  img").each(function(i){
                            $(this).css({
                            "transform":"rotateY( " + i * deg + "deg) translateZ(200px)" }); 
                                    $(this).attr('ondragstart', 'return false');
                        });
                        $(document).mousedown(function (ev) {
                            var x_ = ev.clientX;
                            var y_ = ev.clientY;
                            clearInterval(play);
                            console.log('我按下了');
                            $(this).bind('mousemove', function (ev) {
                                /*获取当前鼠标的坐标*/
                                var x = ev.clientX;
                                var y = ev.clientY;
                                /*两次坐标之间的距离*/
                                xN = x - x_;
                                yN = y - y_;
                                roY += xN * 0.2;
                                roX -= yN * 0.1;
                                console.log('移动');
                                $('.pic').css({
                                    transform: 'perspective(800px) rotateX(' + roX + 'deg) rotateY(' + roY + 'deg)'
                                });
                                /*之前的鼠标坐标*/
                                x_ = ev.clientX;
                                y_ = ev.clientY;
                            });
                        }).mouseup(function () {
                            $(this).unbind('mousemove');
                            var play = setInterval(function () {
                                xN *= 0.95;
                                yN *= 0.95;
                                if (Math.abs(xN) < 1 && Math.abs(yN) < 1) {
                                    clearInterval(play);
                                }
                                roY += xN * 0.2;
                                roX -= yN * 0.1;
                                $('.pic').css({
                                    transform: 'perspective(800px) rotateX(' + roX + 'deg) rotateY(' + roY + 'deg)'
                                });

                            }, 30);
                        });
                 });
                </script>
        </body>
</html>

原文出处:http://www.htmleaf.com/jQuery/list_1_5.html

  

posted @ 2017-02-17 11:59  地球上的我  阅读(820)  评论(0编辑  收藏  举报