<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="format-detection" content="telephone=no;address=no;email=no"> <title></title> <style> #div_1{ -webkit-perspective: 72; } #div_1_1{ transform: rotateX(42deg); } #div_1_1 ::selection{ background:none; } .div_class1{ width: 600px; height: 300px; border: 1px black solid; border-radius: 20px; background: cornsilk; } .div_class1_1{ width: 200px; height: 190px; border: 1px rgb(69, 63, 53) solid; border-radius: 20px; position: relative; top: 50px; background: #0087ff; z-index: 999; margin: 0px auto; text-align: center; vertical-align: middle; line-height: 50px; } .div_a{ cursor: pointer; } #div_2_1{ /*transform: perspective(500px) translateZ(-60px);*/ transition: transform 3s,background 3s,width 3s,height 3s; } #div_2_1:hover{ width: 300px; height: 260px; background: red; -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } details{ cursor: pointer; } .cubec{ perspective: 1000px; /*background-color: skyblue;*/ display: inline-block; width: 250px; height : 250px; margin-top: 50px; } .mainc{ width: 100%; height: 100%; display: inline-block; transition: all 0.85s cubic-bezier(0.175, 0.885, 0.32, 1.275); text-align: center; position: relative; transform-style: preserve-3d; transform: rotateX(-25deg) rotateY(25deg); } .mainc div{ width: 100%; height: 100%; border: 1px solid #888; background: #FFF; color: #333; line-height: 250px; opacity: 0.8; } .cover_1{ overflow: hidden; position: absolute; box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.1), 0 0 50px rgba(0, 0, 0, 0.3); transform: translate3d(0, 0, 125px); } .cover_1_top{ overflow: hidden; position: absolute; box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.1), 0 0 50px rgba(0, 0, 0, 0.3); transform: rotateX(90deg) translate3d(0px,0px,125px); } .cover_1_bottom{ overflow: hidden; position: absolute; box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.1), 0 0 50px rgba(0, 0, 0, 0.3); transform: rotateX(90deg) rotateY(0deg) translate3d(0px,0px,-125px); } .cover_1_right{ overflow: hidden; position: absolute; box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.1), 0 0 50px rgba(0, 0, 0, 0.3); transform: rotateX(90deg) rotateY(90deg) translate3d(0px,0px,125px); } .cover_1_left{ overflow: hidden; position: absolute; box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.1), 0 0 50px rgba(0, 0, 0, 0.3); transform: rotateX(90deg) rotateY(90deg) translate3d(0px,0px,-125px); } .cover_1_hou{ overflow: hidden; position: absolute; box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.1), 0 0 50px rgba(0, 0, 0, 0.3); transform: rotateX(0deg) rotateY(0deg) translate3d(0px,0px,-125px); } </style> </head> <body> <div class="div_a" onclick="">效果测试1</div> <div id="div_1" style="" class="div_class1"> <div id="div_1_1" class="div_class1_1"> 测试内容 </div> </div> <div class="div_a" onclick="">效果测试2</div> <div id="div_2" style="" class="div_class1"> <div id="div_2_1" class="div_class1_1" style=""> 可用作放大缩小旋转的动漫 </div> </div> <details open="open"> <summary>效果测试3</summary> <div> 正方体 <div class="cubec"> <div class="mainc" id="mainc"> <div class="cover_1"> </div> <div class="cover_1_top"> </div> <div class="cover_1_bottom"> </div> <div class="cover_1_left"> </div> <div class="cover_1_right"> </div> <div class="cover_1_hou"> </div> </div> </div> </div> </details> </body> </html> <script> // 初始化 document.getElementById('mainc').style.transform = "rotateX(-25deg) rotateY(25deg)"; var a; var cx = -25; // 初始x var cy = 25; // 初始y var dx; // 点击下时的位置 var dy; // 点击下时的位置 document.onmouseup = function () { if (!a)return; document.all ? a.releaseCapture() : window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP); a = ""; }; document.onmousemove = function (d) { if (!a)return; if (!d)d = event; var tx = d.clientX - dx; var ty = d.clientY - dy; var wx = tx/20 + cx; var wy = ty/20 + cy; document.getElementById('mainc').style.transform = "rotateX("+wx+"deg) rotateY("+wy+"deg)"; console.log(wx); }; document.onmousedown = function(e){ document.all ? a.setCapture() : window.captureEvents(Event.MOUSEMOVE); dx = e.clientX; dy = e.clientY; a = 2; } // document.getElementById('mainc').style.transform = "rotateX(-35deg) rotateY(35deg)"; // alert(document.getElementById('mainc').style.transform); </script>