من خلال JS الأصليين ، انقر فوق أحداث ، مكبس الماوس ، أحداث رفع الماوس وحركة الماوس ، يتم تحقيق سحب وتناوب المكعب ثلاثي الأبعاد ، وينعكس زاوية الدوران في الوقت الحقيقي لعرضها على الواجهة.
مبدأ التنفيذ: من خلال الحصول على إحداثيات الماوس عند النقر على الشاشة وإحداثيات الماوس عند التحرك ، يمكننا الحصول على مسافة الماوس يتحرك على المحور السيني والمحور ص ، وتعيين المسافة إلى سمة التحويل في الوقت الحقيقي.
لذلك ، يتم تحقيق تأثير دوران المكعب ثلاثي الأبعاد عن طريق تغيير قيمة التحويل: تدوير قيمة السمة.
كتلة رمز HTML:
<Body> <input type = "button" value = "انقر للانتشار"/> <إدخال type = "text" value = "" /// x- axis rogle angle <input type = "text" type = "text"/> <viv> <viv> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> </viv> </body>
كتلة رمز CSS:
<Style> body {cursor: url ("img/openhand1.png") ، auto ؛}. big_box {width: 500px ؛ height: 500px ؛ margin: 200px auto ؛}. Preserve-3D ؛ strances-style: Preserve-3D ؛ التحويل الأولي: 100px 100px 00px ؛ الموضع: النسبية ؛ التحويل: rotatex (0deg) rotatey (0deg) rotatez (0deg) scale3d (0.7،0.7،0.7) ؛}. 200px ؛ الارتفاع: 200 بكسل ؛ حجم الصناديق: صندوق الحدود ؛ الحدود: 1 بكسل الصلبة #999 ؛/*التعتيم: 0.7 ؛*/النصوص: المركز ؛ الخط: 200px ؛ الحجم font: 60px ؛ font-weight: 700 ؛ الحدود: الحدود: 12 ٪ ؛ rotatey (-90deg) Translatex (-100px) ؛ // left}. Translatey (-100px) ؛ // TOP} Span: nth-child (6) {background-color: #122b40 ؛ transform: translatez (100px) ؛ // front} .box: hover span {opacity: 0.3 ؛}. box: hover {الرسوم المتحركة-play-state: paused ؛كتلة رمز JS:
<script> move () ؛ clickbox () ؛ // free عند الضغط على الماوس ونقله ، وظيفة move () {var body = document.queryselector ("body") ؛ var box = document.queryselector (". box") ؛ var xnum = document.queryelector ( xx = 0 ، yy = 0 ؛ var xarr = [] ، yarr = [] e.clienty/2 ؛ window.onmousemove = function (e) {// mouse moving event----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- = xx+"°";// Assign the obtained distance رقم لإدخال لعرض زاوية الدوران ynum.value = yy+"°" ؛ // اكتب زاوية الدوران في مربع التحويل. e.clienty/2 ؛}} ؛ window.onmouseup = function () {// mouselift event --- يستخدم لمسح حدث حركة الماوس ، body.style.cursor = 'url ("img/openhand1.png") ، auto' ؛ = document.queryselector (". open") ؛ var box = document.queryselector (". box") ؛ var son = box.children ؛ var value = 0 ؛ Translatey (-100px) "، <br>" Rotatex (-90deg) Translatey (100px) "،" Translatez (-100px) "،" Translatez (100px) "] Translatex (100px) translatez (100px) "، <br>" Rotatex (90deg) Translatey (-100px) translatez (100px) "،" Rotatex (-90deg) Translatey (100px) ؛ function () {if (value == 0) {value = 1 ؛ btn.value = "انقر لدمج" ؛ for (var i = 0 ؛ i <arr1.length ؛ i ++) {son [i] انتشار "؛ for (var j = 0 ؛ j <arr0.length ؛ j ++) {son [j] .style.transform = arr0 [j] ؛ console.log (j) ؛}}} ؛} </script>ما ورد أعلاه هو المعرفة ذات الصلة التي تم تقديمها لك حول دوران السحب 3D Cube استنادًا إلى تحويل السمة الجديد و JS الأصلي لـ CSS3. آمل أن يكون ذلك مفيدًا للجميع. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لي وسوف يرد المحرر على الجميع في الوقت المناسب. شكرا جزيلا لدعمكم لموقع wulin.com!