css3实现3D多面体 

  1 <!DOCTYPE html>
  2 <html>
  3 
  4 <head>
  5     <meta charset="UTF-8">
  6     <title></title>
  7     <style type="text/css">
  8         /*n边形的外角和为360  360/n
  9             n变形的内角 180 - 360/n*/
 10         * {
 11             margin: 0;
 12             padding: 0;
 13         }
 14 
 15         html,
 16         body {
 17             background-image: radial-gradient(#fff, #000);
 18             height: 100%;
 19             overflow: hidden;
 20 
 21         }
 22 
 23         #wrap {
 24             position: absolute;
 25             left: 0;
 26             top: 0;
 27             right: 0;
 28             bottom: 0;
 29             margin: auto;
 30             width: 300px;
 31             height: 300px;
 32             /*border: 1px solid;*/
 33 
 34             perspective: 1000px;
 35             user-select: none;
 36         }
 37 
 38         #wrap>.box {
 39             position: absolute;
 40             left: 0;
 41             top: 0;
 42             right: 0;
 43             bottom: 0;
 44             margin: auto;
 45             width: 300px;
 46             height: 300px;
 47             transition: 10s transform;
 48             transform-style: preserve-3d;
 49             animation-name: rotate;
 50             animation-duration: 48s;
 51             animation-timing-function: linear;
 52             animation-iteration-count: infinite;
 53             animation-fill-mode: forwards;
 54         }
 55 
 56         #wrap>.box>div {
 57             position: absolute;
 58             width: 300px;
 59             height: 300px;
 60             background: rgba(0, 0, 0, 0.1);
 61             text-align: center;
 62             font: 50px/300px "微软雅黑";
 63             backface-visibility: visible;
 64         }
 65 
 66 
 67         @keyframes rotate {
 68             form {
 69                 transform: rotateY(var(--beginDeg));
 70             }
 71 
 72             to {
 73                 transform: rotateY(var(--endDeg));
 74             }
 75         }
 76 
 77         #wrap:hover>.box {
 78             animation-play-state: paused;
 79         }
 80     </style>
 81 </head>
 82 
 83 <body style="--beginDeg:0deg;--endDeg:360deg;">
 84     <div id="wrap">
 85         <div class="box">
 86         </div>
 87     </div>
 88 </body>
 89 <script type="text/javascript">
 90 
 91     //n：棱数
 92     window.onload = function () {
 93         createLZ(11);
 94         var down = false;
 95         var startX = 0;
 96         var baseRotate = 0;
 97         var currentRotate = 0;
 98         var wrap = document.getElementById('wrap');
 99         var body = document.body;
100         var boxNode = document.querySelector("#wrap > .box");
101         // wrap元素鼠标按下滑动事件
102         wrap.onmousedown = function (e) {
103             down = true
104             startX = e.clientX;
105         }
106         wrap.onmousemove = function (e) {
107             if (down) {
108                 currentRotate = baseRotate + (e.clientX - startX) / 10;
109                 boxNode.style.transform = "rotateY(" + currentRotate + "deg)";
110             }
111         }
112         window.onmouseup = function (e) {
113             baseRotate = currentRotate;
114             down = false;
115             body.style.cssText = "--beginDeg:" + currentRotate + "deg;--endDeg:" + (currentRotate + 360) + "deg;";
116         }
117 
118     }
119 
120     function createLZ(n) {
121         var boxNode = document.querySelector("#wrap > .box");
122         var stlyleNode = document.createElement("style");
123         //外角
124         var degOut = 360 / n;
125         //内角
126         var degIn = 180 - 360 / n;
127 
128         var text = "";
129         var cssText = "";
130         for (var i = 0; i < n; i++) {
131             text += "<div></div>";
132             cssText += `#wrap > .box > div:nth-child(${i + 1}){transform: rotateY(${i * degOut}deg);background: url(./img/${i}.jpeg) center no-repeat;}`;
133         }
134 
135         boxNode.innerHTML = text;
136         var mianNode = document.querySelector("#wrap > .box > div");
137         //棱长
138         var length = mianNode.offsetWidth;
139 
140         cssText += "#wrap > .box{transform-origin: center center -" + (length / 2 * Math.tan((degIn / 2) * Math.PI / 180)) + "px;}";
141         cssText += "#wrap > .box > div{transform-origin: center center -" + (length / 2 * Math.tan((degIn / 2) * Math.PI / 180)) + "px;}";
142 
143 
144         stlyleNode.innerHTML = cssText;
145         document.head.appendChild(stlyleNode);
146     }
147 
148 
149 
150 </script>
151 
152 </html>

 

posted @ 2022-05-12 16:34  豆浆不要油条  阅读(77)  评论(0)    收藏  举报