Вращайте div элегантно и растягивайте на ширину браузера - PullRequest
Новая
       17

Вращайте div элегантно и растягивайте на ширину браузера

0 голосов
/ 16 сентября 2018

Я хочу повернуть div, используя javascript, ограниченный только определенными градусами.

Вот мой код.Это работает, но я хочу, чтобы он вращался только на несколько градусов и не делал сальто назад.

Я кодирую его для своего личного сайта.Когда div вращается, похоже, что углы отрезаны.Я хочу, чтобы div распространился в угол экрана.

Я использую данные датчика акселерометра мобильного телефона для поворота div. 

// Check for device orientation support
if (window.DeviceOrientationEvent) {
  var
    // The Orientation when we last checked for tilt
    lastOrientation,
    // The current Orientation
    currentOrientation,
    // How often we check for a tilt
    tiltTime = 100,
    // How much we must rotate to tilt
    tiltThreshold = 100,
    // The div that shows the rotation
    odiv = document.getElementById("orienter"),
    // The interval that updates the tilt
    tiltInterval = setInterval(tiltCheck, tiltTime);

  // Class to hold orientation information
  function Orientation(x, y, z) {
    this.x = x || 0;
    this.y = y || 0;
    this.z = z || 0;
  }
  // Member to get difference between two Orientations
  Orientation.prototype.diff = function(o) {
    return new Orientation(
      this.x - o.x,
      this.y - o.y,
      this.z - o.z);
  };
  // Member to find magnitude of Orientation
  Orientation.prototype.mag = function() {
    return Math.sqrt(
      (this.x * this.x) +
      (this.y * this.y) +
      (this.z * this.z));
  };

  // Function to handle when titled
  function tiltHandler() {
    console.log("tilt");
    // Visualize the tilt
    odiv.className = "tilt";
    // Reset after a time
    setTimeout(function() {
      odiv.className = "";
    }, 2000);
  }

  // The function that checks for tilts
  function tiltCheck() {
    // If we have an orientation to compare to
    if (lastOrientation) {
      // Get how much we rotated
      var mag = currentOrientation.diff(lastOrientation).mag();
      // If it's more than the threshold
      if (mag > tiltThreshold) {
        // We tilted
        tiltHandler();
      }
    }
    // Always update the last orientation
    lastOrientation = currentOrientation;
  }

  // Add an orientation listener
  window.addEventListener("deviceorientation", function(e) {
    // Set the current orientation to the device orientation
    currentOrientation = new Orientation(e.beta, e.gamma, e.alpha);
    // Keep our div parralel to the floor (browser specific)
    odiv.style.webkitTransform =
      "rotateX(" + (0) + "deg) " +
      "rotateY(" + (-0) + "deg) " +
      "rotateZ(" + ((currentOrientation.z - currentOrientation.y + currentOrientation.x)) + "deg )";
  });
}
/*Perspective helps us see the rotation*/

div#container {
  -webkit-perspective: 500px;
}

div#orienter {
  text-align: center;
  width: 100%;
  font-family: Arial;
  font-size: 2em;
  height: 80px;
  position: sticky;
  transform-origin: 50% 0%;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#8c00ff+29,ff0084+99 */
  background: #8c00ff;
  /* Old browsers */
  background: -moz-linear-gradient(top, #8c00ff 29%, #ff0084 99%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #8c00ff 29%, #ff0084 99%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #8c00ff 29%, #ff0084 99%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8c00ff', endColorstr='#ff0084', GradientType=0);
  /* IE6-9 */
}

div#orienter.tilt {
  background-color: red;
}
<div id="container">
  <!--Actual oriented div-->
  <div id="orienter"></div>
</div>
...