vue2 3d 切换器

空闲时写了一个3d切换器，灵感来自于转行前画3d工程图，效果如图：

　　功能：按住鼠标中间，变为3d模式，点击6个页面中的某一个页面，页面旋转放大，恢复到2d图形，3d图消失。再次点击鼠标中间，恢复为3d（含动画效果），按住中键不放，可以左右或者上下拖动，3d图片做720°旋转。

　　效果可在：此处查看 请使用chrome打开

 

　　转动原理：由于正方体只有6个面，所以ul+6个li标签，先做出正方体布局。li标签布局出正方向后，都是相对于ul标签的位置，所以转动ul标签，正方形并不会散架。鼠标水平移动X为ul transform:rotateX(x)，鼠标竖直移动Y为ul的transform：rotateY(-Y) 实现转动。-Y是为了一开始竖直方向不要反方向转动。

      关于坐标轴正方向:x轴：从左到右，y轴：从上到下，z轴：从屏幕到眼睛。坐标系是会转动的，这点非常恶心。

　　转动正方向：眼睛在坐标原点观察，逆时针为正方向。比如rotateX（30deg），指绕x轴正方向转30°。看到的那一面是下面往上跑的。

　　动画布局：ul li 为百分比布局，外层套一层div，实际切换动画由放大缩小div的大小来实现。动画时保存3d图形位置，当然只需要保存ul的转动数据，当按下中键后，恢复ul转动数据，恢复div大小，就可以了。

　　动画层：1、div tansition all 1s 这个动画是渐变放大与缩小，让ul与li都同时放大缩小。 2、ul transition all 1s 这儿需要动态加入属性，转动时不需要，切换时才需要，效果为切换时转动放大和缩小 3、transiton-group 包裹li标签，这儿动画是为了其中5个标签渐变消失，只留一个标签。

　　有了上面的理论，基本可以写出来了，这儿贴出代码。

<template>
  <div class='r' @mousedown='start'>
    <div  ref='odiv' :style='odiv' class='oDiv'>
      <ul :class='ulClass' :style="ulSty" v-show='showUl' > 
        <transition-group name='tt' enter-active-class='animated fadeIn' leave-active-class='animated fadeOut'> <!--淡入淡出效果-->
           <li v-for='n in 6' class='li'  v-show='showLi[n-1]' ref='n' :key='n' @mousedown='show(n,$event)'>
              <component :is='msg[n-1]' class='com'></component>
           </li> 
        </transition-group>
      </ul>
    </div>
 </transition>
  </div>
</template>

<script>
import pieChart from './pieChart.vue'
import barChart from './barChart.vue'
import info from './info.vue'
import table1 from './table.vue'
import baidu from './baidu.vue'
import reg from './reg.vue'
export default{
    data(){
      return{
         msg:['info','barChart','reg','table1','baidu','pieChart'],
         n:'',
         m:true,
         showUl:true,
         ulClass:'ul1',
         flag:true,
         odiv:{
            width:'300px',
            height:'300px',
            margin:'50px auto 100px',
            transition:'all 1s'
         },
         showLi:[true,true,true,true,true,true],
         ulSty:{
           transform:''
         },

         changeSty:[],
         drag:{lastX:0,lastY:0,X:0,Y:0},
      }
    },
    components:{
      pieChart,barChart,info,table1,baidu,reg
    },
    methods:{
      show(n,e){//点击鼠标左键，显示该组件。
        if(e.button!=0)return
        if(!this.flag)return 
        this.flag=false//show某个组件的时候，不能再次show它。
        this.n=nthis.odiv.width='100%'
        this.odiv.height='500px'
        let b= this.$refs.n[n-1].style
        let d=getComputedStyle(this.$refs.n[n-1],null)['background']
        b.overflow='visible'
        b.opacity='1'
        b.background='#fff'
        b.transition='all 1s'
        this.showLi=[false,false,false,false,false,false]
        this.showLi[n-1]=true
        this.ulClass='ul1 move'
        let c=getComputedStyle(this.$refs.n[n-1],null)['transform']
        this.changeSty=[this.ulSty.transform,c,d]
        this.ulSty.transform='rotateX(0deg) rotateY(0deg)'
        b.transform='rotateX(0deg) rotateY(0deg) translateZ(0px)' 
      },
    init(){//当点击鼠标中键，恢复3d图形之前的位置。初始化li，ul，div的属性。
        let b= this.$refs.n[this.n-1].style
        b.overflow='hidden'
        b.opacity='0.8'
        b.background=this.changeSty[2]
        b.transform=this.changeSty[1]
        this.odiv.width='300px'
        this.odiv.height='300px'
        this.showLi=[true,true,true,true,true,true] 
        this.ulClass='ul1'
        this.ulSty.transform=this.changeSty[0]
    },
    start(e){//转动效果
      if(e.button!=1)return 
      if(this.n){
        this.init()
      }
      e.preventDefault();   
      this.flag=true
      let x1=e.clientX,
        y1=e.clientY
        document.onmousemove=(evt)=>{
            let dx=evt.clientX-x1
            let dy=evt.clientY-y1
            this.drag.X=(this.drag.lastX+dx)%360
            this.drag.Y=(this.drag.lastY+dy)%360
            this.ulSty.transform='rotateX('+ -this.drag.Y+'deg) rotateY('+this.drag.X+'deg)'
        }
        document.onmouseup=()=>{
          this.drag.lastX=this.drag.X
          this.drag.lastY=this.drag.Y
          document.onmouseup=null
          document.onmousemove=null
        }
    }  
  }, 
}
  
</script>

<style lang="stylus" scoped>
.com
  position:absolute
  width:100%
  
.r
  width:100%
wh()
  width:100%
  height:100%

.ul1
  position relative
  wh()
  transform-style: preserve-3d;
.move
  transition all 1s
.li
  list-style:none
  wh()
  position:absolute
  font-size 40px
  background:#fff
  z-index:0
  transform-origin:center center
  overflow:hidden
  transition:all 1s
n(x,y,z)
  transform:rotateY(y) rotateX(x) translateZ(150px)
  background:rgba(z,0.8)
.li:nth-child(1)
  n(0,90deg,burlywood)
.li:nth-child(2)
  n(0,-90deg,beige)
.li:nth-child(3)
  n(90deg,0,lightyellow)
.li:nth-child(4)
  n(180deg,0,pink)
.li:nth-child(5)
  n(270deg,0,#20A0FF)
.li:nth-child(6)
  n(0,0,aquamarine)

  
</style>