css 实现3d转盘效果

 

<template>
<div class="wrapper">
  <div class="demo1">
    <span class="item" v-for="i in 6" @click="testClick(this)">测试{{i}}</span>
  </div>

  <div class="demo2">
    <span class="item" v-for="i in 3" @click="testClick(this)">测试{{i}}</span>
  </div>
</div>
</template>

<script>
export default {
  name: "TestTwo",
  methods: {
    testClick(obj){
      console.log("点击的控件:", obj);
      //alert('点击了:' + obj);
    }
  },
  created() {


  }
}
</script>

<style scoped>
@keyframes play {
  from{
    transform: rotateX(-12deg) rotateY(0deg);
  }
  to{
    transform: rotateX(-12deg) rotateY(360deg);
  }
}

div.demo1 {
  top: 120px;
  left: 120px;
  position: relative;
  width: 200px;
  height: 200px;
  transform-style: preserve-3d;
  transform: rotateX(0deg) rotateY(0deg);
  margin-right: -100px;
  animation: play 10s linear 0s infinite normal;
}
/*animation: play 10s linear 0s infinite normal*/
/*animation 参数*/
/*animation-name    规定需要绑定到选择器的 keyframe 名称。。*/
/*animation-duration    规定完成动画所花费的时间，以秒或毫秒计。*/
/*animation-timing-function    规定动画的速度曲线。*/
/*animation-delay    规定在动画开始之前的延迟。*/
/*animation-iteration-count    规定动画应该播放的次数。*/
/*animation-direction    规定是否应该轮流反向播放动画。*/

span.item {
  display: inline-block;
  width: 200px;
  height: 200px;
  background-color: #efefef;
  position: absolute;
  top: 0;
  left: 0;
  border: 2px solid #13ce66;
  text-align: center;
  line-height: 200px;
  font-size: 60px
}

div.demo1:hover {
  animation-play-state: paused;
}

span.item:hover {
  background-color: #5daf34;
}

span.item:nth-child(1) {
  transform: rotateY(60deg) translateZ(200px);
}
span.item:nth-child(2) {
  transform: rotateY(120deg) translateZ(200px);
}
span.item:nth-child(3) {
  transform: rotateY(180deg) translateZ(200px);
}
span.item:nth-child(4) {
  transform: rotateY(240deg) translateZ(200px);
}
span.item:nth-child(5) {
  transform: rotateY(300deg) translateZ(200px);
}
span.item:nth-child(6) {
  transform: rotateY(360deg) translateZ(200px);
}


div.demo2 {
  top: 120px;
  left: 120px;
  position: relative;
  width: 200px;
  height: 200px;
  transform-style: preserve-3d;
  transform: rotateX(0deg) rotateY(0deg);
  margin-right: -100px;
  margin-top: 50px;
  animation: play 10s linear 0s infinite normal;
}

div.demo2:hover {
  animation-play-state: paused;
}

div.demo2 span.item:hover {
  background-color: #5daf34;
  margin-top: -50px;
  margin-left: -50px;
  width: 300px;
  height: 300px;
}


div.demo2 span.item:nth-child(1) {
  transform: rotateY(120deg) translateZ(200px);
}
div.demo2 span.item:nth-child(2) {
  transform: rotateY(240deg) translateZ(200px);
}
div.demo2 span.item:nth-child(3) {
  transform: rotateY(360deg) translateZ(200px);
}

</style>