移动端 退拽 rotateY旋转

要在移动端实现拖拽和rotateY旋转效果，你可以使用JavaScript的touch事件和CSS3的transform属性来实现。

首先，在HTML中创建一个可拖动的元素，比如一个图片或者一个div。然后，使用JavaScript的touchstart、touchmove和touchend事件来设置拖动时的数据和样式。接着，使用CSS3的transform属性来实现旋转效果。

下面是一个示例代码，可以让你更好地理解实现方式：

HTML代码：

<div id="drag"></div>

CSS代码：

#drag {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotateY(0deg);
  transition: transform 0.3s ease-out;
}

JavaScript代码：

var dragItem = document.getElementById("drag");
var startX = 0;
var startY = 0;
var currentX = 0;
var currentY = 0;
var rotateAngle = 0;

// 设置拖动时的数据和样式
dragItem.addEventListener("touchstart", function(event) {
  event.preventDefault();
  startX = event.touches[0].clientX;
  startY = event.touches[0].clientY;
  currentX = startX;
  currentY = startY;
  dragItem.style.transform = "translate(-50%, -50%) rotateY(" + rotateAngle + "deg)";
});

dragItem.addEventListener("touchmove", function(event) {
  event.preventDefault();
  currentX = event.touches[0].clientX;
  currentY = event.touches[0].clientY;
  var deltaX = currentX - startX;
  var deltaY = currentY - startY;
  var rotateRatio = deltaX / window.innerWidth;
  rotateAngle = rotateRatio * 180;
  dragItem.style.transform = "translate(-50%, -50%) rotateY(" + rotateAngle + "deg)";
});

dragItem.addEventListener("touchend", function(event) {
  event.preventDefault();
  dragItem.style.transform = "translate(-50%, -50%) rotateY(0deg)";
});

在上面的代码中，我们首先获取了一个可拖动的元素，并为它设置了touchstart、touchmove和touchend事件，用于设置拖动时的数据和样式。然后，在touchmove事件中，我们计算了手指在屏幕上的移动距离，并根据移动距离计算出旋转的角度。最后，在touchend事件中，我们将元素的旋转角度重置为0。

当然，这只是一个简单的示例，你可以根据自己的需求进行更复杂的操作。