CSS3 使用 JavaScript 拖动转换 3d 变换

Posted 2023-05-08

【中文标题】CSS3 使用 JavaScript 拖动转换 3d 变换

【英文标题】：CSS3 Translate 3d Transform with JavaScript Drag

【发布时间】：2014-03-17 17:18:33

【问题描述】：

perspective:400px;
transform-style: preserve-3d;
transform:translateX(-$drawerWidth);
transition: #$transition;

window.onload = addListeners();

function addListeners()
    document.getElementById('app').addEventListener('mousedown', mouseDown, false);
    window.addEventListener('mouseup', mouseUp, false);



function mouseUp()

    window.removeEventListener('mousemove', divMove, true);


function mouseDown(e)
  window.addEventListener('mousemove', divMove, true);


function divMove(e)
  var div = document.getElementById('app');
  div.style.position = 'relative';
  div.style.left = e.clientX + 'px';

如上所述，我有一点 CSS 和一点 JS。我正在尝试拖动并显示一个抽屉。我希望拖动不仅可以通过触摸来跟踪应用画布，而且我还希望看到导航抽屉通过 1:1 的变换跟踪拖动和打开，以及应用程序的其余拖动。

想法？我知道这有点难读所以...当您拖动一个 div 时，另一个 div 开始播放它的动画 1:1 沿 x 轴拖动 +1 或 -1。

【问题讨论】：

请拨弄一下。 jsfiddle.net

如果你想实时看到拖动/变换，你还需要使用mousemove事件

【参考方案1】：

如果您希望使用 javascript 控制 CSS 动画，这是一个很好的资源。

http://css-tricks.com/controlling-css-animations-transitions-javascript/

无需深入研究，最简单的方法就是用 jQuery 替换 css 转换样式。在每次鼠标移动时更改它以描述更改。

【讨论】：

谢谢，我今天早些时候发现了这个。我会在朝着解决方案前进时进行更新...在 JSFIDDLE 中！

当然，我很乐意提供帮助。

酷！我现在真的很忙，但这是我急于与之合作的事情！不幸的是，目前的优先级较低：(