devbox
凡人多烦事01
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

css实现3D长方形，可旋转_长方体旋转的代码

作者：凡人多烦事01 | 2024-02-16 21:49:12

赞

踩

长方体旋转的代码

先上图：

实现过程:

1、长方体六个面 

before，after， top ,buttom,left,right

2、每个面不同旋转角度

  1. before: 向前移动一半width宽度，transform: translateZ(${width/2}px)
  2. after: 向后移动一半width宽度、y轴旋转180度  transform: `translateZ(${-width/2}px) rotateY(180deg)`
  3. top: 以top为轴，x轴旋转90度，向后移动一半宽度 transform-origin: top; transform: `rotateX(90deg) translate(0, ${-width/2}px)`}
  4. bottom: 以bottom为轴，x轴旋90度，向后移动一半宽度， 放缩width/height,width: `${width}px`, height: `${height}px`,transform: `rotateX(90deg) translate(0, ${-width/2}px) scale(0,width/height)`
  5. left: 以left为轴，y轴旋转-90度，向左移动一半宽度，{transform: `rotateY(-90deg) translate(${-width/2}px, 0)`}
  6. right: 以right为轴，y轴旋转90度，向右移动一半宽度，{transform: `rotateY(90deg) translate(${width/2}px, 0)`}
3、在外圈div做旋转
4、代码：box.vue
  1. <template>
  2.     <div class="box-wrap">
  3.         <div class="box" id="box" style="transform: rotateX(0deg) rotateY(0deg);" :style="{width: `${width}px`, height: `${height}px`}" @mousedown="mousedown" @mousemove="mousemove" @mouseup="mouseup" @mouseout="mouseup">
  4.             <div id="face-before" class="face face-before" :style="{transform: `translateZ(${width/2}px)`}">
  5.                 <slot name="before" ></slot>
  6.             </div>
  7.             <div id="face-after" class="face face-after" :style="{transform: `translateZ(${-width/2}px) rotateY(180deg)`}">
  8.                 <slot name="after"></slot>
  9.             </div>
  10.             <div id="face-top" class="face face-top" :style="{width: `${width}px`, height: `${width}px`, transform: `rotateX(90deg) translate(0, ${-width/2}px)`}">
  11.                 <slot name="top"></slot>
  12.             </div>
  13.             <div id="face-bottom" class="face face-bottom" :style="{width: `${width}px`, height: `${height}px`,transform: `rotateX(90deg) translate(0, ${width/2}px) scale(0,width/height)`}">
  14.                 <slot name="buttom"></slot>
  15.             </div>
  16.             <div id="face-left" class="face face-left" :style="{transform: `rotateY(-90deg) translate(${-width/2}px, 0)`}" >
  17.                 <slot name="left"></slot>
  18.             </div>
  19.             <div id="face-right" class="face face-right" :style="{transform: `rotateY(90deg) translate(${width/2}px, 0)`}">
  20.                 <slot name="right"></slot>
  21.             </div>
  22.         </div>
  23.     </div>
  24. </template>
  25.  
  26. <script>
  27. export default {
  28.     name: 'box',
  29.     data() {
  30.         return {
  31.             canMove: false,
  32.             startX: 0,
  33.             startY: 0,
  34.             currentDeg: 0,
  35.         }
  36.     },
  37.     props: {
  38.         width: {
  39.             type: Number,
  40.             default: 300,
  41.         },
  42.         height: {
  43.             type: Number,
  44.             default: 300,
  45.         },
  46.     },
  47.     methods: {
  48.         //  mouseenter(ev) { // 按下鼠标
  49.         //     this.canMove = true;
  50.         //     this.startX = ev.clientX;
  51.         //     this.startY = ev.clientY;
  52.         // },
  53.         mousedown(ev) { // 按下鼠标
  54.             this.canMove = true;
  55.             this.startX = ev.clientX;
  56.             this.startY = ev.clientY;
  57.         },
  58.         mousemove(ev) {  // 鼠标移动
  59.             if(this.canMove) {
  60.                 const $box = document.getElementById('box');
  61.                 const obj = this.getTransform();
  62.                 const x = this.startX - ev.clientX;
  63.                 const y = this.startY - ev.clientY;
  64.                 const newx = (obj.x - (y / this.height * 180));
  65.                 const newy = (obj.y - (x / this.width * 180));
  66.                 console.log('x / this.width * 90===', x / this.width * 180);
  67.                 console.log('newy===', newy);
  68.                 this.startX = ev.clientX;
  69.                 this.startY = ev.clientY;
  70.                 $box.style.transform = `rotateX(-5deg) rotateY(${newy}deg)`;
  71.                 this.currentDeg = newy;
  72.             }
  73.         },
  74.         mouseout() { // 鼠标离开
  75.             if(this.canMove) {
  76.                 const $box = document.getElementById('box');
  77.                 const value = this.currentDeg % 90;
  78.                 if(Math.abs(value) >= 45) {
  79.                     $box.style.transform = `rotateX(0deg) rotateY(${this.currentDeg + (90 - value) + 0.01}deg)`;
  80.                 }else {
  81.                     $box.style.transform = `rotateX(0deg) rotateY(${this.currentDeg - value + 0.01}deg)`;
  82.                 }
  83.                 
  84.                 this.canMove = false;
  85.             }
  86.         },
  87.         showAuto() {
  88.             const $box = document.getElementById('box');
  89.             $box.style['transform-origin'] = 'center';
  90.             $box.style.transform = `rotateX(-20deg) rotateY(20deg)`;
  91.         },
  92.         showTop() {
  93.             const $box = document.getElementById('box');
  94.             $box.style['transform-origin'] = 'center';
  95.             $box.style.transform = `rotateX(-89.999deg) rotateY(0deg)`;
  96.         },
  97.         showLeft() {
  98.             const $box = document.getElementById('box');
  99.             $box.style['transform-origin'] = 'center';
  100.             $box.style.transform = `rotateX(0deg) rotateY(89.999deg)`;
  101.         },
  102.         mouseup() { // 鼠标离开
  103.             if(this.canMove) {
  104.                 const $box = document.getElementById('box');
  105.                 const value = this.currentDeg % 90;
  106.                 if(Math.abs(value) >= 45) {
  107.                     if(value < 0) {
  108.                         $box.style.transform = `rotateX(0deg) rotateY(${this.currentDeg - (90 - Math.abs(value)) + 0.01}deg)`;
  109.                     }else {
  110.                         $box.style.transform = `rotateX(0deg) rotateY(${this.currentDeg + (90 - Math.abs(value)) + 0.01}deg)`;
  111.                     }
  112.                     
  113.                 }else {
  114.                     if(value < 0) {
  115.                         $box.style.transform = `rotateX(0deg) rotateY(${this.currentDeg - value + 0.01}deg)`;
  116.                     }else {
  117.                         $box.style.transform = `rotateX(0deg) rotateY(${this.currentDeg + value + 0.01}deg)`;
  118.                     }
  119.                     
  120.                 }
  121.                 
  122.                 this.canMove = false;
  123.             }
  124.         },
  125.         reset() {
  126.             const $box = document.getElementById('box');
  127.             $box.style.transform = `rotateX(-20deg) rotateY(20deg)`;
  128.         },
  129.         getTransform() {
  130.             const $box = document.getElementById('box');
  131.             const ts = $box.style.transform.split(' ');
  132.  
  133.             const xs = ts[0].indexOf('X(');
  134.             const xe = ts[0].indexOf('deg');
  135.  
  136.             const ys = ts[1].indexOf('Y(');
  137.             const ye = ts[1].indexOf('deg');
  138.  
  139.             const x = ts[0].substring(xs + 2, xe);
  140.             const y = ts[1].substring(ys + 2, ye);
  141.             return {
  142.                 x,
  143.                 y,
  144.             }
  145.         },
  146.     },
  147.     mounted() {
  148.  
  149.     },
  150. }
  151. </script>
  152. <style lang="scss" scoped>
  153.     .box-wrap {
  154.         .box { 
  155.             position: relative;
  156.             z-index: 6;
  157.             margin: auto;
  158.             transform-style: preserve-3d;
  159.             transform-origin: center, center;
  160.             transition: transform 1s;
  161.             .face {
  162.                 position: absolute;
  163.                 width: 100%;
  164.                 height: 100%;
  165.                 opacity: 0.3;
  166.                 font-size: 30px;
  167.                 
  168.             }
  169.             .face-before {
  170.                 transform: translateZ(150px);
  171.                 background-color:  rgb(0, 255, 170);
  172.                 text-align: left;
  173.                 
  174.             } 
  175.             .face-after {
  176.                 transform-origin: center;
  177.                 transform: translateZ(-150px) rotateX(-180deg);
  178.                 background-color: #0088cc;
  179.             } 
  180.             .face-top {
  181.                 transform-origin: top;
  182.                 transform: rotateX(90deg) translate(0, -150px);
  183.                 background-color: rgb(255, 0, 170);
  184.             } 
  185.             .face-bottom {
  186.                 transform-origin: bottom;
  187.                 transform: rotateX(-90deg) translate(0, 150px);
  188.                 background-color:  rgb(0, 255, 85);
  189.             } 
  190.             .face-left {
  191.                 transform-origin: left;
  192.                 transform: rotateY(-90deg) translate(-150px, 0);
  193.                 background-color: rgb(255, 208, 0);
  194.             }
  195.             .face-right {
  196.                 transform-origin: right;
  197.                 transform: rotateY(90deg) translate(150px, 0);
  198.                 background-color: rgb(255, 208, 0);
  199.             }
  200.         }
  201.     }
  202. </style>
  203.  
  204.

5、使用：

  1. <template>
  2.     <div class="app-home">
  3.         <header class="header">
  4.             <div class="content">
  5.                 <div class="header-left">
  6.                     <span class="title">凡夫俗子</span>
  7.                     <span class="desc">我们追寻梦想， 因为那最令人开心</span>
  8.                 </div>
  9.                 <div class="header-right">
  10.  
  11.                 </div>
  12.             </div>
  13.         </header>
  14.         <box :height="300" :width="600" ref="box">
  15.             <template slot="before">
  16.                 <div>before</div>
  17.             </template>
  18.             <template slot="after">
  19.                 <div>after</div>
  20.             </template>
  21.             <template slot="left">
  22.                 <div>left</div>
  23.             </template>
  24.             <template slot="right">
  25.                 <div>right</div>
  26.             </template>
  27.             <template slot="top">
  28.                 <div>top</div>
  29.             </template>
  30.             <template slot="bottom">
  31.                 <div>bottom</div>
  32.             </template>
  33.         </box>
  34.     </div>
  35. </template>
  36.  
  37. <script>
  38. import box from '@/web/components/box3.vue'
  39. export default {
  40.     name: 'HelloWorld',
  41.     data () {
  42.         return {
  43.             boxWidth: 1152,
  44.             boxHeight: 600,
  45.         }
  46.     },
  47.     components: {
  48.         box
  49.     },
  50.     methods: {
  51.         goTopClick() {
  52.             this.$refs.box.showTop();
  53.         },
  54.         goLeftClick() {
  55.             this.$refs.box.showLeft();
  56.         },
  57.         showAuto() {
  58.             this.$refs.box.showAuto();
  59.         }
  60.     },
  61.     mounted() {
  62.         this.boxHeight = document.documentElement.clientHeight - 15;
  63.         window.onresize = () => {
  64.             this.boxHeight = document.documentElement.clientHeight - 15;
  65.         };
  66.     }
  67. }
  68. </script>
  69.  
  70. <!-- Add "scoped" attribute to limit CSS to this component only -->
  71. <style lang="scss">
  72.     .app-home {
  73.         background-color: #f5f5f5;
  74.         .header {
  75.             width: 100%;
  76.             height: 60px;
  77.             margin-bottom: 15px;
  78.             background-color: rgba(255,255,255,.5);
  79.             .content {
  80.                 width: 1200px;
  81.                 min-width: 1200px;
  82.                 margin: auto;
  83.                 overflow: auto;
  84.                 padding-left: 24px;
  85.                 padding-right: 24px;
  86.                 
  87.                 color: #00bbd3;
  88.                 .header-left {
  89.                     .title {
  90.                         display: inline-block;
  91.                         vertical-align: middle;
  92.                         margin-right: 24px;
  93.                         line-height: 60px;
  94.                         font-size: 25px;
  95.                         letter-spacing: 0.2em;
  96.                     }
  97.                     .desc {
  98.                         display: inline-block;
  99.                         vertical-align: middle;
  100.                         line-height: 60px;
  101.                         font-size: 14px;
  102.                     }
  103.                 }
  104.                 .header-right {
  105.                     font-size: 12px;
  106.                 }
  107.             }
  108.         }
  109.         
  110.     }
  111. </style>
  112.  
  113.

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/凡人多烦事01/article/detail/96994
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号