zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    appscan的初步使用
    解决selenium自动化上传图片或文件出现windows窗口问题
    写入excel数据报错:ValueError: Cannot convert {'code': 0, 'msg': 'login success!', 'username': 'test',} to Excel
    接口自动化使用session会话解决数据依赖问题
    使用django开发一个简单的post接口
    windows10,解决jmeter5.2.1版本界面字体过小问题
    django配置使用mysql数据库运行报错:django.core.exceptions.ImproperlyConfigured: Error loading MySQLdb module: No module named 'MySQLdb'
    python装饰器
    python闭包
    工作总结
  • 原文地址:https://www.cnblogs.com/rchao/p/15232275.html
Copyright © 2011-2022 走看看