html+css平面块转换伪3d

web_阿锐

已于 2023-12-14 17:18:44 修改

阅读量368

点赞数 10

文章标签：平面 vue html css

于 2023-12-14 14:15:01 首次发布

本文链接：https://blog.csdn.net/weixin_47068942/article/details/134994081

版权

<template>
      <div class="box">
        <template v-for="(item,index) in list">
            <div class="box-list bottom" :style="handleBootom(item)" :key="index">
              <div class="box-list-content">
              </div>
            </div>
            <div class="box-list" :style="handleTop(item)" :key="'top'+index">
              <div class="box-list-content">
                  
              </div>
            </div>
            <div v-if="!item.noLeftLine" class="box-list left" :style="handleLeft(item)" :key="'left'+index"> 
              <div class="box-list-content"><div v-if="item.leftDoor" class="box-list-door"></div></div>
            </div>
            <div class="box-list right" :style="handleRight(item)" :key="'right'+index">
              <div class="box-list-content">
                <div v-if="item.rightDoor" class="box-list-door"></div>
              </div>
            </div>
            <div v-if="!item.noTopLine" class="box-list back" :style="handleBack(item)" :key="'back'+index">
              <div class="box-list-content">
                <div v-if="item.backDoor" class="box-list-door"></div>
              </div>
            </div>
            <div class="box-list front" :style="handleFront(item)" :key="'front'+index">
              <div class="box-list-content">
                <div class="box-list-text"></div>
              </div>
            </div>
        </template>
      </div>
</template>

<script>
export default {
  data() {
    return {
      zHeight:80,//墙壁高度
    };
  },
  props:{
    list:{
        type:Array,
        default:(()=>[])
    },
  },
  computed: {
  },
  methods:{
    handleBootom({height,width,x,y}){
        let newy = 0
        newy = -(height/2+y)
        return `transform: rotateX(-90deg) translateZ(${-height / 2 + this.zHeight}px) translateY(${newy}px) translateX(${x}px);width:${width}px;height:${height}px;`;
    },
    handleTop({height,width,x,y}){
        let newy = 0
        newy = -(height/2+y)
        return `transform: rotateX(-90deg) translateZ(${-height / 2}px) translateY(${newy}px) translateX(${x}px);width:${width}px;height:${height}px;`;
    },
    handleLeft({height,width,x,y}){
        let newy = 0
        newy = -(height/2+y)
        return `transform:rotateY(90deg) translateZ(${-height / 2+x}px) translateX(${newy}px);width:${height}px;height:${this.zHeight}px;`;
    },
    handleRight({height,width,x,y}){
        let newy = 0
        newy = -(height/2+y)
        return `transform:rotateY(-90deg) translateZ(${-width + height / 2 - x}px) translateX(${-newy}px);width:${height}px;height:${this.zHeight}px;`;
    },
    handleBack({height,width,x,y}){
        let newy = y
        return `transform: translateZ(${newy}px) translateX(${x}px);width:${width}px;height:${this.zHeight}px;`;
    },
    handleFront({height,width,x,y}){
        let newy = y +height
        return `transform: translateZ(${newy}px) translateX(${x}px);width:${width}px;height:${this.zHeight}px;`;
    },
  }
};
</script>

<style lang="scss" scoped>
.box {
  width: 600px;
  height: 400px;
  text-align: center;
  font-size: 24px;
  position: relative;
  perspective: 1000px;
  transform-style: preserve-3d;
  transform: rotateX(-30deg) rotateY(20deg);
}
.front {
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  opacity: 0.5;
}
.back {
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  opacity: 0.5;
}
.left {
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  opacity: 0.5;
}
.right {
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  opacity: 0.5;
}
.top {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  opacity: 0.5;
}
.bottom {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  opacity: 0.5;
}
.box-list{
  position: absolute;
  left: 0;
  top: 0;
  border: 1px solid red;
}
.box-list-content{
  width: 100%;
  height: 100%;
  position: relative;
  .box-list-text{
    position: absolute;
    top: -30px;
    left: 0px;
    font-size: 12px;
    color: black;
      transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
      transform-style:flat;
        perspective: none;
  }
  .box-list-door{
  position: absolute;
  bottom: 0;
  left: 20px;
  height: 40px;
  background: pink;
  border-radius: 10px 10px 0 0;
  width: 30px;
  font-size: 12px;
}
}
.front {
  background-color: #003A94;
  //   transform: translateZ(100px);
}
.left {
  background-color: #003A94;
}
.right {
  background-color: #003A94;
}
.top {
  background-color: rgb(12, 12, 12);
}
.bottom {
  background-color: #003A94;
}
.back {
  background-color: #003A94;
}
</style>

//数据list
    let list = [
      {
        id: "1694588056395",
        geoPoint: "34,43",
        productId: "",
        productName: "框",
        width: "69",
        height: "144",
        type: "2",
        txt: null,
        backDoor: true,
      },
      {
        id: "1694588065822",
        geoPoint: "34,187",
        productId: "",
        productName: "框",
        width: "187",
        height: "140",
        type: "2",
        txt: null,
        leftDoor: true,
      },
      {
        id: "1694588076961",
        geoPoint: "219,43",
        productId: "",
        productName: "框",
        width: "131",
        height: "284",
        type: "2",
        txt: null,
        leftDoor: true,
      },
      {
        id: "1694588119402",
        geoPoint: "103,43",
        productId: "",
        productName: "框",
        width: "118",
        height: "72",
        type: "2",
        txt: null,
      },
      {
        id: "1694588153587",
        geoPoint: "350,189",
        productId: "",
        productName: "框",
        width: "128",
        height: "138",
        type: "2",
        txt: null,
        rightDoor: true,
      },

      {
        id: "1694860108680",
        geoPoint: "103,114",
        productId: "",
        productName: "框",
        width: "118",
        height: "73",
        type: "2",
        txt: null,
      },
      {
        id: "1694860172207",
        geoPoint: "350,116",
        productId: "",
        productName: "框",
        width: "118",
        height: "73",
        type: "2",
        txt: null,
      },
      {
        id: "1694860238576",
        geoPoint: "350,43",
        productId: "",
        productName: "框",
        width: "118",
        height: "73",
        type: "2",
        txt: null,
        leftDoor: true,
      },

      {
        id: "1694860346378",
        geoPoint: "468,43",
        productId: "",
        productName: "框",
        width: "87",
        height: "146",
        type: "2",
        txt: null,
        leftDoor: true,
      },
      {
        id: "1694860376220",
        geoPoint: "478,189",
        productId: "",
        productName: "框",
        width: "77",
        height: "138",
        type: "2",
        txt: null,
      },

    ];
//数据需转换一下
      list.forEach((item) => {
        if (item.width) {
          item.width = Number(item.width);
          item.height = Number(item.height);
        }
        if (item.type == 2) {
          item.x = Number(item.geoPoint.split(",")[0]);
          item.y = Number(item.geoPoint.split(",")[1]);
          newList.push(item);
        }
      });

后续可以自己加样式美化

列如：