Css 3d trasformare ruotare (x + y) utilizzando il trascinamento con il mouse

Question 1

recentemente sono stato un tuffo nel mondo del css trasformare e voluto per ruotare un div (asse x e y), sono stato in grado di farlo con 2 cursori a 0 a 360 gradi, ma ora in attesa di farlo con il trascinamento del mouse, ho fatto un molto sciatta sforzo che cerca di suggerimenti per risolvere il problema:

jsfiddle link per verificare

"use strict";

let elContainer = $('#container');
let elBox = $('#box');

$(document).ready(function() {
  $('.slider-rotate').on('input', function() {
    sliderRotate();
  });

  elContainer.mousedown(function(e) {
    initDragRotate(e);
  });

  elContainer.mousemove(function(e) {
    dragRotate(e);
  });

  elContainer.mouseup(function(e) {
    endDragRotate();
  });

});

let dragging = false;
let delta = {};

function initDragRotate(e) {
  dragging = true;
  delta = {
    x: e.pageX,
    y: e.pageY,
  };
}

function dragRotate(e) {
  if (!dragging) {
    return;
  }

  delta.x = e.pageX - delta.x;
  delta.y = e.pageY - delta.y;

  let rotateParam = '';
  rotateParam += ' rotate' + 'Y' + '(' + delta.x + 'deg)';
  rotateParam += ' rotate' + 'X' + '(' + delta.y + 'deg)';
  elBox.css('transform', rotateParam);
}

function endDragRotate() {
  if (!dragging) {
    return;
  }

  dragging = false;
}


function sliderRotate() {
  let rotateParam = '';
  $('.slider-rotate').each(function() {
    rotateParam += ' ' + getRotateParamString($(this));
  });
  elBox.css('transform', rotateParam);
}

function getRotateParamString(elClass) {
  let val = elClass.val();
  let rotateType = elClass.data('rotateType');
  let rotateParam = 'rotate' + rotateType + '(' + val + 'deg)';

  return rotateParam;
}

#container {
  background: #ccc;
  padding: 10vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

#box {
  width: 30vh;
  height: 30vh;
  border: 5px solid #000;
  position: relative;
  transform-style: preserve-3d;
}

#box>div {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <div id="box">
    <div style="background: #f00;"></div>
    <div style="background: #0f0;"></div>
  </div>
</div>

<div id="control">
  <br>
  <label>
    x
    <input type="range" class="slider-rotate" data-rotate-type="X" min="0" max="360" value="0">
  </label>
  <br>
  <label>
    y
    <input type="range" class="slider-rotate" data-rotate-type="Y" min="0" max="360" value="0">
  </label>
</div>

inoltre, ci sono 2 div in alto e in basso (verde e rosso) con trasformazione in stile conservare-3d proprietà, sperando che non mostra altro colore quando capovolto, ma senza fortuna! si prega di suggerire, grazie!

Question 2

Il calulation per quanto a ruota è un po ' strano.

Credo che ciò che è necessario è di avere la quantità di rotazione dipende dalla quantità del mouse viene posizionato su e giù per lo schermo. Per fare questo proporzionale alla dimensione dello schermo è necessario dividerlo dalla dimensione dello schermo e poi moltiplicarlo per 360 per ottenere l'intera gamma di pageX/Y da 0 a essere a destra/in basso dello schermo.

"use strict";

let elContainer = $('#container');
let elBox = $('#box');

$(document).ready(function() {
  $('.slider-rotate').on('input', function() {
    sliderRotate();
  });

  elContainer.mousedown(function(e) {
    initDragRotate(e);
  });

  elContainer.mousemove(function(e) {
    dragRotate(e);
  });

  elContainer.mouseup(function(e) {
    endDragRotate();
  });

});

let dragging = false;
let delta = {};

function initDragRotate(e) {
  dragging = true;
  delta = {
    x: e.pageX,
    y: e.pageY,
  };
}

function dragRotate(e) {
  if (!dragging) {
    return;
  }
  // THIS IS THE CALCULATION THAT HAS CHANGED
  delta.x = e.pageX / window.innerWidth * 360; //- delta.x;
  delta.y = e.pageY / window.innerHeight * 360; // - delta.y;

  let rotateParam = '';
  rotateParam += ' rotate' + 'Y' + '(' + delta.x + 'deg)';
  rotateParam += ' rotate' + 'X' + '(' + delta.y + 'deg)';
  elBox.css('transform', rotateParam);
}

function endDragRotate() {
  if (!dragging) {
    return;
  }

  dragging = false;
}


function sliderRotate() {
  let rotateParam = '';
  $('.slider-rotate').each(function() {
    rotateParam += ' ' + getRotateParamString($(this));
  });
  elBox.css('transform', rotateParam);
}

function getRotateParamString(elClass) {
  let val = elClass.val();
  let rotateType = elClass.data('rotateType');
  let rotateParam = 'rotate' + rotateType + '(' + val + 'deg)';

  return rotateParam;
}

#container {
  background: #ccc;
  padding: 10vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

#box {
  width: 30vh;
  height: 30vh;
  border: 5px solid #000;
  position: relative;
  transform-style: preserve-3d;
}

#box>div {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <div id="box">
    <div style="background: #f00;"></div>
    <div style="background: #0f0;"></div>
  </div>
</div>

<div id="control">
  <br>
  <label>
    x
    <input type="range" class="slider-rotate" data-rotate-type="X" min="0" max="360" value="0">
  </label>
  <br>
  <label>
    y
    <input type="range" class="slider-rotate" data-rotate-type="Y" min="0" max="360" value="0">
  </label>
</div>

A Haworth · Answer 1 · 2021-11-24T07:00:06

Il calulation per quanto a ruota è un po ' strano.

Credo che ciò che è necessario è di avere la quantità di rotazione dipende dalla quantità del mouse viene posizionato su e giù per lo schermo. Per fare questo proporzionale alla dimensione dello schermo è necessario dividerlo dalla dimensione dello schermo e poi moltiplicarlo per 360 per ottenere l'intera gamma di pageX/Y da 0 a essere a destra/in basso dello schermo.

"use strict";

let elContainer = $('#container');
let elBox = $('#box');

$(document).ready(function() {
  $('.slider-rotate').on('input', function() {
    sliderRotate();
  });

  elContainer.mousedown(function(e) {
    initDragRotate(e);
  });

  elContainer.mousemove(function(e) {
    dragRotate(e);
  });

  elContainer.mouseup(function(e) {
    endDragRotate();
  });

});

let dragging = false;
let delta = {};

function initDragRotate(e) {
  dragging = true;
  delta = {
    x: e.pageX,
    y: e.pageY,
  };
}

function dragRotate(e) {
  if (!dragging) {
    return;
  }
  // THIS IS THE CALCULATION THAT HAS CHANGED
  delta.x = e.pageX / window.innerWidth * 360; //- delta.x;
  delta.y = e.pageY / window.innerHeight * 360; // - delta.y;

  let rotateParam = '';
  rotateParam += ' rotate' + 'Y' + '(' + delta.x + 'deg)';
  rotateParam += ' rotate' + 'X' + '(' + delta.y + 'deg)';
  elBox.css('transform', rotateParam);
}

function endDragRotate() {
  if (!dragging) {
    return;
  }

  dragging = false;
}


function sliderRotate() {
  let rotateParam = '';
  $('.slider-rotate').each(function() {
    rotateParam += ' ' + getRotateParamString($(this));
  });
  elBox.css('transform', rotateParam);
}

function getRotateParamString(elClass) {
  let val = elClass.val();
  let rotateType = elClass.data('rotateType');
  let rotateParam = 'rotate' + rotateType + '(' + val + 'deg)';

  return rotateParam;
}

#container {
  background: #ccc;
  padding: 10vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

#box {
  width: 30vh;
  height: 30vh;
  border: 5px solid #000;
  position: relative;
  transform-style: preserve-3d;
}

#box>div {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <div id="box">
    <div style="background: #f00;"></div>
    <div style="background: #0f0;"></div>
  </div>
</div>

<div id="control">
  <br>
  <label>
    x
    <input type="range" class="slider-rotate" data-rotate-type="X" min="0" max="360" value="0">
  </label>
  <br>
  <label>
    y
    <input type="range" class="slider-rotate" data-rotate-type="Y" min="0" max="360" value="0">
  </label>
</div>

qualche suggerimento sul perché di colore rosso (il div nella parte posteriore) non è visualizzato sulla ruota, o devo creare un altra domanda per che?
Effettivamente potrebbe essere meglio per creare una nuova domanda in quanto è un problema diverso.

Css 3d trasformare ruotare (x + y) utilizzando il trascinamento con il mouse

Domanda

Migliore risposta

In altre lingue

Questa pagina è in altre lingue

Popolare in questa categoria

Domande popolari in questa categoria