Css 3b dönüşümü fare sürüklemesini kullanarak döndürme (x + y)

Question 1

son zamanlarda css dönüşümü dünyasına dalıyordum ve bir div (x ve y ekseni) döndürmek istedim, bunu 0 ila 360 derece aralığında 2 sürgü ile yapabildim ama şimdi fareyi sürükleyerek yapmayı dört gözle bekliyorum, bunu düzeltmek için öneri arayan bu konuda çok özensiz bir çaba sarf ettim:

test etmek için jsfiddle bağlantısı

"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>

ayrıca, transform-style preserve-3d özelliğine sahip üstte ve altta (yeşil ve kırmızı) 2 div var, çevrildiğinde diğer rengi göstermesini umuyor ancak şans yok! tavsiye lütfen, teşekkür ederim!

Question 2

Ne kadar döneceğinin hesaplanması biraz garip.

İhtiyacınız olan şeyin, farenin ekranın karşısına ve altına yerleştirildiği miktara bağlı olarak dönme miktarına sahip olmak olduğuna inanıyorum. Bunu ekran boyutuyla orantılı hale getirmek için, ekran boyutuna bölmeniz ve ardından pageX/Y'nin 0'dan ekranın sağında/altında olmasına kadar tüm aralığı elde etmek için 360 ile çarpmanız gerekir.

"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

Ne kadar döneceğinin hesaplanması biraz garip.

İhtiyacınız olan şeyin, farenin ekranın karşısına ve altına yerleştirildiği miktara bağlı olarak dönme miktarına sahip olmak olduğuna inanıyorum. Bunu ekran boyutuyla orantılı hale getirmek için, ekran boyutuna bölmeniz ve ardından pageX/Y'nin 0'dan ekranın sağında/altında olmasına kadar tüm aralığı elde etmek için 360 ile çarpmanız gerekir.

"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>

kırmızı rengin (arkadaki div) neden rotasyonda gösterilmediğine dair herhangi bir öneri var mı, yoksa bunun için farklı bir soru mu oluşturmam gerekiyor?
Aslında farklı bir sorun olduğu için yeni bir soru oluşturmak daha iyi olabilir.

Css 3b dönüşümü fare sürüklemesini kullanarak döndürme (x + y)

Soru

En iyi cevabı

Diğer dillerde

Bu sayfa diğer dillerde

Bu kategoride popüler

Popüler soruları bu kategoride