jQuery实现可拖拽3D万花筒旋转特效

jQuery实现可拖拽3D万花筒旋转特效攻略

一、需求分析

我们要实现一个可拖拽3D万花筒旋转特效，包含以下几个要求：

1. 可以拖拽鼠标按下的元素；
2. 元素在被拖拽时随着鼠标的移动而旋转；
3. 元素的旋转效果需要有3D的视觉效果；
4. 元素的旋转需要动画过渡效果。

二、技术选型

针对我们的需求，我们可以选择使用jQuery和CSS3来实现。

三、具体实现步骤

1. 拖拽实现

首先我们需要实现元素的拖拽，我们可以使用jQuery的mousedown事件、mousemove事件和mouseup事件来实现。

$(document).on('mousedown', '.drag', function(event) {
  var startX = event.pageX,
      startY = event.pageY,
      $this = $(this),
      posX = parseFloat($this.css('left')),
      posY = parseFloat($this.css('top')),
      $viewport = $this.parent(),
      viewportWidth = $viewport.width(),
      viewportHeight = $viewport.height(),
      dragging = false;

  $(document).on('mousemove', function(event) {
    event.preventDefault();
    dragging = true;
    var moveX = event.pageX - startX,
        moveY = event.pageY - startY;
    $this.css({
      'left': posX + moveX,
      'top': posY + moveY
    });
  });

  $(document).on('mouseup', function(event) {
    $(document).off('mousemove');
    $(document).off('mouseup');
    if (dragging) {
      dragging = false;
    }
  });
});

上面的代码中，我们首先监听了元素的mousedown事件，记录下鼠标按下时的起始位置和元素的起始位置。然后在mousemove事件中计算鼠标位移量，并实时更新元素的位置。最后在mouseup事件中解除事件监听，并判断是否拖拽过元素。

2. 旋转实现

在实现元素拖拽的基础上，我们需要实现元素的旋转，我们可以使用CSS3的transform属性来实现。

.kaleidoscope {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 100px auto;
  perspective: 1000px;
}

.k-shape {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: rotateY(0deg) rotateX(0deg) translateZ(-100px);
}

.k-shape .k-shape-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, .5);
  transform: translateZ(10px);
}

上面的代码中，我们使用了CSS3的perspective属性来制造3D视角，使用transform属性来实现元素的旋转效果。其中，我们在元素的父元素上设置了perspective: 1000px;，这样就可以让元素在3D视角下旋转了。我们又在元素上设置了transform: rotateY(0deg) rotateX(0deg) translateZ(-100px);，这样元素会在Z轴上移动一段距离，看起来就是3D效果了。我们的旋转效果就是通过rotateX(deg)和rotateY(deg)来实现的，分别代表元素在X轴和Y轴上的旋转角度。另外，我们为元素添加了一个内部元素，用来设置元素的呈现效果。

3. 动画过渡实现

最后我们需要为元素的旋转效果添加动画过渡效果，这样的话旋转才会更加流畅自然。我们依旧可以使用CSS3的transition属性来实现。

.k-shape {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: rotateY(0deg) rotateX(0deg) translateZ(-100px);
  transition: all .3s ease-out;
}

上面的代码中，我们为元素添加了all .3s ease-out;，表示在所有属性上都设置了0.3秒的过渡时间，并且使用了缓动函数，使得效果更加自然流畅。

四、示例说明

下面是两个实例，用来展示我们实现的可拖拽3D万花筒旋转特效。

示例一

<div class="kaleidoscope">
  <div class="k-shape drag">
    <div class="k-shape-bg"></div>
  </div>
</div>

$(document).on('mousedown', '.drag', function(event) {
  // 上面的拖拽实现代码
});

$(document).on('mousemove', '.drag', function(event) {
  var $this = $(this),
      width = $this.width(),
      height = $this.height(),
      offsetX = event.offsetX,
      offsetY = event.offsetY,
      deltaX = offsetX / width - 0.5,
      deltaY = 0.5 - offsetY / height,
      degX = deltaY * 20,
      degY = deltaX * 20;

  $this.css({
    transform: 'rotateX(' + degX + 'deg) rotateY(' + degY + 'deg) translateZ(-100px)'
  });
});

$(document).on('mouseup', '.drag', function(event) {
  // 上面的拖拽实现代码
});

在这个示例中，我们在mousemove事件监听中，计算出鼠标在元素上的位置偏移，然后分别计算出X轴和Y轴的旋转角度，最后通过transform属性来设置元素的旋转效果。

示例二

<div class="kaleidoscope">
  <div class="k-shape drag" style="background-image: url(image1.jpg);">
    <div class="k-shape-bg" style="opacity: 0;"></div>
  </div>
  <div class="k-shape drag" style="background-image: url(image2.jpg);">
    <div class="k-shape-bg" style="opacity: 0;"></div>
  </div>
  <div class="k-shape drag" style="background-image: url(image3.jpg);">
    <div class="k-shape-bg" style="opacity: 0;"></div>
  </div>
  <div class="k-shape drag" style="background-image: url(image4.jpg);">
    <div class="k-shape-bg" style="opacity: 0;"></div>
  </div>
</div>

$(document).on('mousedown', '.drag', function(event) {
  // 上面的拖拽实现代码
});

$(document).on('mousemove', '.drag', function(event) {
  var $this = $(this),
      width = $this.width(),
      height = $this.height(),
      offsetX = event.offsetX,
      offsetY = event.offsetY,
      deltaX = offsetX / width - 0.5,
      deltaY = 0.5 - offsetY / height,
      degX = deltaY * 20,
      degY = deltaX * 20;

  $this.css({
    transform: 'rotateX(' + degX + 'deg) rotateY(' + degY + 'deg) translateZ(-100px)'
  });

  $this.find('.k-shape-bg').css({
    opacity: 1 - Math.abs(deltaX) * 2 - Math.abs(deltaY) * 2
  });
});

$(document).on('mouseup', '.drag', function(event) {
  // 上面的拖拽实现代码
});

在这个示例中，我们在元素内部添加了一个背景元素，并且设置了透明度为0，然后在mousemove事件监听中，计算出鼠标在元素上的位置偏移，根据偏移值计算出透明度值，最后通过opacity来设置背景元素的透明度，从而实现了一个类似万花筒的效果。