Rotate image in 3D | Вращайте изображение в 3D
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

72 lines
3.7KB

  1. const b64 = "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";
  2. // // // //
  3. ПовернутьИзображение = мир =>
  4. {
  5. изо.style.transform = `rotateX(${мир.x}deg) rotateY(${мир.y}deg) rotateZ(${мир.z}deg)`;
  6. };
  7. // // // //
  8. ВывестиУголПоворота = мир =>
  9. {
  10. console.debug("угол", мир.x, мир.y, мир.z);
  11. };
  12. // // // //
  13. ОтслеживатьИзменениеУгла = мир =>
  14. {
  15. var x = document.getElementById("x");
  16. x.oninput = function() {
  17. мир.x = x.value;
  18. мир.уведомить("изменили угол");
  19. }
  20. var y = document.getElementById("y");
  21. y.oninput = function() {
  22. мир.y = y.value;
  23. мир.уведомить("изменили угол");
  24. }
  25. var z = document.getElementById("z");
  26. z.oninput = function() {
  27. мир.z = z.value;
  28. мир.уведомить("изменили угол");
  29. }
  30. };
  31. // // // //
  32. ПодготовитьИнтерфейс = мир =>
  33. {
  34. var м = мир.модули.модульПоУказателю(УКАЗАТЕЛЬ_ЭТОГО_МОДУЛЯ);
  35. var структура = м.содержимое["/🙈.html"];
  36. var вид = м.содержимое["/🙈.css"];
  37. document.body.innerHTML = структура.replace("${b64}", b64);
  38. var стиль = document.createElement("style");
  39. document.head.appendChild(стиль);
  40. стиль.innerHTML = вид;
  41. мир.x = 0;
  42. мир.y = 0;
  43. мир.z = 0;
  44. };
  45. // // // //
  46. ЗадатьЗаголовок = мир =>
  47. {
  48. document.title = "🎢 ПЕРЕВОРОТ 3D";
  49. };