【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

相关推荐
前端爆冲1 分钟前
项目中无用export的检测方案
前端
旧味清欢|12 分钟前
关注分离(Separation of Concerns)在前端开发中的实践演进:从 XMLHttpRequest 到 Fetch API
javascript·http·es6
热爱编程的小曾29 分钟前
sqli-labs靶场 less 8
前端·数据库·less
gongzemin41 分钟前
React 和 Vue3 在事件传递的区别
前端·vue.js·react.js
Apifox1 小时前
如何在 Apifox 中通过 Runner 运行包含云端数据库连接配置的测试场景
前端·后端·ci/cd
-代号95271 小时前
【JavaScript】十四、轮播图
javascript·css·css3
树上有只程序猿1 小时前
后端思维之高并发处理方案
前端
庸俗今天不摸鱼2 小时前
【万字总结】前端全方位性能优化指南(十)——自适应优化系统、遗传算法调参、Service Worker智能降级方案
前端·性能优化·webassembly
QTX187302 小时前
JavaScript 中的原型链与继承
开发语言·javascript·原型模式
黄毛火烧雪下2 小时前
React Context API 用于在组件树中共享全局状态
前端·javascript·react.js