css3d變換旋轉（x y）使用滑鼠拖動

我最近潛入了 css 變換的世界，想旋轉一個 div（x 軸和 y 軸），我能夠用 0 到 360 度范圍的 2 個滑塊來完成，但現在期待通過拖動滑鼠來完成，我在尋找修復它的建議方面做了非常草率的努力：

jsfiddle 測驗鏈接

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

此外，頂部和底部（綠色和紅色）有 2 個 div，具有變換樣式的 preserve-3d 屬性，希望它在翻轉時顯示另一種顏色，但沒有運氣！請推薦，謝謝！

uj5u.com熱心網友回復：

旋轉多少的計算有點奇怪。

我相信你需要的是讓旋轉量取決于滑鼠在螢屏上和向下放置的量。要使其與螢屏尺寸成比例，您需要將其除以螢屏尺寸，然后乘以 360 以獲得從 pageX/Y 為 0 到位于螢屏右側/底部的完整范圍。

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

標籤：javascript 查询 css 转变

上一篇：獲取所有特定div的“類”名稱

下一篇：Hive“插入”不會添加值