【CSS3】很适合个人网站首页的立体布局

完整代码

html 复制代码
<template>
  <div relative>
    <div absolute w-full h-full>
      <div flex items-center justify-center top-0 left-0 class="wrap">
        <div class="floor"></div>
      </div>
    </div>
    <div flex items-center justify-center h-100vh w-full relative z-22 top--32>
      <div flex gap-40>
        <Btn2 />
        <Btn3 />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import Btn2 from "@/components/btns/btn2.vue";
import Btn3 from "@/components/btns/btn3.vue";
</script>

<style scoped lang="scss">
.wrap {
  perspective: 1000px; /* 设置透视点,数值越大,翻转效果越平缓 */
  transform-style: preserve-3d;
  overflow: hidden;
}

.floor {
  background-color: rgb(202, 202, 202);
  width: 72%;
  height: 100vh;
  transform: rotateX(80deg);
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.7);
}
</style>

Btn组件的来源:
https://uiverse.io/buttons

相关推荐
海天胜景3 分钟前
vue3 el-table 列数据合计
前端·javascript·vue.js
征尘bjajmd4 分钟前
vue+element-ui实现主子表
javascript·vue.js·elementui
哥本哈士奇9 分钟前
Web前端交互利用Python跟大模型操作
前端·python·交互
小毛驴85024 分钟前
典型的 Vue 3 项目目录结构详解
前端·javascript·vue.js
德育处主任25 分钟前
p5.js 四边形(quad)的基础用法
前端·数据可视化·canvas
半生过往31 分钟前
Vue 项目动态接口获取翻译数据实现方案(前端处理语言翻译 vue-i18n)
前端·javascript·vue.js·i18n
德育处主任42 分钟前
p5.js 入门:用 point () 绘制点的超简单教程
前端·javascript·canvas
yume_sibai1 小时前
Vue 插槽
前端·javascript·vue.js
O败者食尘D1 小时前
【Vue2】结合chrome与element-ui的网页端条码打印
前端·vue.js·chrome
橘颂TA2 小时前
【C++】C++11特性的介绍和使用(第三篇)
前端·c++·算法·c++11