vue旋转木马组件demo怎么实现

实现步骤

1.确定组件类型

确定组件类型，如上图设计，标准的旋转木马组件

2.选择实现方式

1.1 使用swpier等现有的组件，进行css样式覆盖

• 优点：利用现有的组件进行样式覆盖，开发速度快

• 缺点：需覆盖样式较多，编写混乱，css基础不足，导致徒劳无功 1.2 自己编写一个旋转木马公用组件（选用）

• 优点：锻炼下自己插拔编程思想，方便后期复用，送人玫瑰，手留余香

3.功能需求分析

本次我们主要讲述自己实现组件，分析后，需要满足以下功能点：

• 3.1 构建空间，满足3d外观要求，并配有旋转动画、激活后的抖动（抖动暂未实现，有需要的可以自己追加css动画接口）

• 3.2 可拖拽组件中子元素，拖拽结束后，激活选中的子元素

• 3.3 任意点击子元素，激活点击的子元素

4.话不多说，上代码

复制下方的代码，粘贴到vue文件中，即可使用。

.wapper {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #000;
}
main {
  user-select: none;
  position: relative;
  width: 220px;
  height: 130px;
  // 官方解释：指定了观察者与z=0平面的距离，使具有三维位置变换的元素产生透视效果
  // 具体可以操作该值进行效果观测
  perspective: 800px;
}
.Trojan {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: all 1s;
}
.TrojanChild {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 1px solid yellow;
  color: #fff;
  &.activeChild {
    border: 1px solid red !important;
  }
  & img {
    width: 100%;
    height: 100%;
  }
  :hover {
    cursor: grab;
  }
  :active {
    cursor: grabbing;
  }
}