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

  

时间: 2024-10-24 11:27:57

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

jQuery.smoove — jQuery和CSS3炫酷滚动页面内容元素动画特效插件

插件介绍: jQuery-smoove是一款jQuery和CSS3炫酷滚动页面内容元素动画特效插件.该内容元素动画插件在页面滚动到指定位置时,该位置的HTML元素会执行指定的CSS3动画特效,如旋转.翻转.放大缩小等动画特效.使用Smoove页面滚动元素动画特效插件可以很轻松的制作出各种华丽的CSS3动画效果. 基本用法 $('.smoove').smoove(options); 上面的代码会在class为 smoove 的元素上使用默认参数初始化 jQuery Smoove. 你可以通过dat

jQuery和CSS3炫酷滚动页面内容元素动画特效

jquery-smoove是一款jQuery和CSS3炫酷滚动页面内容元素动画特效插件.该内容元素动画插件在页面滚动到指定位置时,该位置的HTML元素会执行指定的CSS3动画特效,如旋转.翻转.放大缩小等动画特效. 使用Smoove页面滚动元素动画特效插件可以很轻松的制作出各种华丽的CSS3动画效果. 在线演示:http://www.htmleaf.com/Demo/201503021449.html 下载地址:http://www.htmleaf.com/jQuery/Layout-Inter

jQuery可拖拽3D万花筒旋转特效

jQuery可拖拽3D万花筒旋转特效 这是一个使用了CSS3立体效果的强大特效,本特效使用jQuery跟CSS3 transform来实现在用户鼠标按下拖动时,环形图片墙可以跟随鼠标进行3D旋转动画. 效果体验:http://hovertree.com/texiao/jquery/92/ 进去后可以上下左右的拖动图片. 本示例中使用到了CSS3的transform-style 属性,该规定如何在 3D 空间中呈现被嵌套的元素. 默认值: flat继承性: no版本: CSS3JavaScript

HTML5 CSS3 诱人的实例: 3D立方体旋转动画DEMO

创意来自:http://www.html5tricks.com/demo/html5-3d-cube/index.html , 同学给我发的例子,感觉很不错,不过实在想不出来实际的用处,但是效果很炫~ 效果图: 知识点: 1.perspective ,transform 的复习 2.css3 backgroud实现格格背景,即面上的小格格 3. @-webkit-keyframes 实现动画 HTML: <body> <div class="stage"> &l

纯CSS3炫酷3D折叠面板动画特效

这是一款效果非常炫酷的CSS3 3D折叠面板动画特效.该折叠面板特效当鼠标移动到图片上时,一个面板会以3d折叠的方式在顶部展开,并显示图片的标题等信息..这个效果使用3D CSS animations 来制作折叠面板的动画,纯CSS,没有使用javascript. 在线演示:http://www.htmleaf.com/Demo/201501251276.html 下载地址:http://www.htmleaf.com/css3/css3donghua/201501251275.html

12种炫酷的CSS3鼠标滑过图片遮罩层动画特效

InContent是一款效果非常炫酷的CSS3鼠标滑过图片遮罩层动画特效.这组特效共有12种不同的鼠标滑过图片效果,分为滑动.旋转和翻转3大类.它可以在支持CSS3 transition和transform属性的现代浏览器中正常工作. 在线预览   源码下载 使用方法 使用该CSS3鼠标滑过图片遮罩层动画特效需要在页面中引入由SASS编译的sass-compiled.css文件或由LESS编译的less-compiled.css文件. <link rel="stylesheet"

9种jQuery和css3图片动画特效代码演示

1.自由旋转的jQuery图片 演示和下载地址 2.css3阴影动画效果 演示和下载地址 3.拉窗帘特效图片 演示和下载地址 4.css3文字特效动画 演示和下载地址 5.css3时钟代码 演示和下载地址 6.css3图片放大动画 演示和下载地址 7.jQuery滑块图片展开效果 演示和下载地址 8.css3文字阴影 演示和下载地址 9.jQuery 3d图片旋转特效 演示和下载地址

jQuery和CSS3超酷全屏视觉差幻灯片特效

这是一款效果非常炫酷的jQuery和CSS3全屏视觉差幻灯片特效.该幻灯片采用半透明的遮罩层作为文字说明层.在幻灯片切换时,文字有动态放大的效果.图片和文字的移动形成了一种微妙的视觉差效果. 效果演示:http://www.htmleaf.com/Demo/201506162049.html 下载地址:http://www.htmleaf.com/jQuery/Slideshow-Scroller/201506162048.html

使用jQuery和CSS3生成的搜索框变形全屏搜索效果

在线演示 本地下载 使用jQuery和CSS3过渡变形效果生成的一个搜索框变形效果实现,可以帮助你更好利用页面格式和内容.实验性质的代码,请大家在产品环境里自己修改使用!