html5 3d效果

最新推荐文章于 2024-07-15 16:36:52 发布

mkmin

最新推荐文章于 2024-07-15 16:36:52 发布

阅读量695

点赞数 1

分类专栏：前端文章标签：前端

本文链接：https://blog.csdn.net/HUSHILIN001/article/details/70250175

版权

前端专栏收录该内容

19 篇文章 1 订阅

订阅专栏

为了照顾新手，直接使用js来写，不使用jq

直接上代码：

<!DOCTYPE html>
<html>
   
   

   <head>
       <meta charset="UTF-8">
       <title>我现在拥有的皮肤</title>
       <style>
           @charset "utf-8";
           * {
               margin: 0;
               padding: 0;
           }

           body {
               background: #000000;
               overflow: hidden;
           }

           #stage {
               background: url("http://ossweb-img.qq.com/images/lol/img/profileicon2/profileicon745.jpg");
               background-size: 100%;
               position: relative;
               width: 200px;
               height: 200px;
               margin: 100px auto;
               /*以下是设置元素的属性在3d中*/
               transform-style: preserve-3d;
               -moz-transform-style: preserve-3d;
               -ms-transform-style: preserve-3d;
               -webkit-transform-style: preserve-3d;
               /*造成前倾的操作*/
               -webkit-transform: perspective(1000px);
               -moz-transform: perspective(1000px);
               -ms-transform: perspective(1000px);
               -o-transform: perspective(1000px);
               transform: perspective(1000px);
           }
           #stage img {
               width: 200px;
               position: absolute;
               /*设置倒影*/
               -webkit-box-reflect: below 10px;
               cursor: pointer;
           }
       </style>
       <script>
           var mystage;
           var imgslenght;
           var mydagger;
           var str;
           var imgs
           var x1 = 0;
           var y1 = 0;
           var x2 = 0;
           var y2 = 0;
           var iscur = false;
           var currentx = 0;
           var currenty = 0;
           var degx = 0;
           var degy = 0;
           window.onload = function() {
               mystage = document.querySelector("#stage");
               imgs = document.querySelectorAll("img");
               imgslenght = imgs.length;
               mydagger = 360 / imgslenght;
               console.log(mydagger);
               myinit();
               //取消默认拖动

               document.ondragstart = function() {
                   return false;
               };
               //鼠标按下的时候
               document.documentElement.addEventListener("mousedown", function(e2) {
                   iscur = true;
                   var e = e2 || event;
                   x1 = e.clientX;
                   y1 = e.clientY;
                   document.documentElement.onmousemove = function(e1) {
                       if(iscur == false) {
                           return false;
                       } else {
                           var e3 = e1 || event;
                           x2 = e3.clientX;
                           y2 = e3.clientY;
                           currentx = x2 - x1;
                           currenty = y2 - y1;
                           //y轴方向

                           degx -= (currenty * 0.4);
                           //x轴方向
                           degy += (currentx * 0.3);
                           var str = "perspective(1000px) rotateX(" + degx + "deg) rotateY(" + degy + "deg)";
                           css3(document.getElementById("stage"), str);
                           x1 = x2;
                           y1 = y2;
                       }
                   };
               });
               document.documentElement.addEventListener("mouseup", function() {
                   iscur = false;

               });

           }
           //设置兼容性
           function css3(element, value) {
               var arr = ["o", "ms", "moz", "webkit", ""];
               var lenght = arr.length;
               for(var i = 0; i < lenght; i++) {
                   element.style[arr[i] + "Transform"] = value;
               }

           };
           //设置初始化的
           function myinit() {
               for(var i = 0; i < imgslenght; i++) {
                   str = "rotateY(" + mydagger * i + "deg) translatez(300px)";
                   css3(imgs[i], str);
               }
           }
       </script>
   </head>

   <body>
       <div id="stage">
           <img src="http://ossweb-img.qq.com/images/lol/appskin/12004.jpg" title="荒野镖客" alt="荒野镖客" />
           <img src="http://ossweb-img.qq.com/images/lol/appskin/96004.jpg" title="圣诞驯鹿" alt="圣诞驯鹿" />
           <img src="http://ossweb-img.qq.com/images/lol/appskin/10007.jpg" title="防爆天使" alt="防爆天使" />
   <img src="http://ossweb-img.qq.com/images/lol/appskin/79003.jpg" title="圣诞老人" alt="圣诞老人" />

   </body>

</html>