展示效果图
css样式
完整代码复制体验（图片就不提供了，自己随便找一些）
模板部分
里面的事件只是为了做路由的跳转，就不展示出来了
<div class="canvas-main"><div class="all" @mouseover="hideOtherElements1(1)" @mouseleave="showOtherElements(1)" v-if="element.element1"><div class="lefter" @click="handleProject('项目1')"><div class="text">项目1</div></div><div class="left" @click="handleProject('项目2')"><div class="text">项目2</div></div><div class="center" @click="handleProject('项目3')"><div class="explainer"><span>项目</span></div><div class="text">项目3</div></div><div class="right" @click="handleProject('项目4')"><div class="text">项目4</div></div><div class="righter" @click="handleProject('项目5')"><div class="text">项目5</div></div></div><div v-if="element.element2" class="all" @mouseover="hideOtherElements2(2)" @mouseleave="showOtherElements(2)"><div class="lefter"></div><div class="left" @click="handleProject('产品3')"><div class="text">产品3</div></div><div class="center" @click="handleProject('产品1')"><div class="explainer"><span>产品</span></div><div class="text">产品1</div></div><div class="right" @click="handleProject('产品2')"><div class="text">产品2</div></div><div class="righter"></div></div></div>
css部分
.canvas-main {position: absolute;top: 0;display: flex;align-items: center;justify-content: center;width: 100%;height: 100%;.all {position: relative;justify-content: center;height: 281px;margin: 0 260px;-webkit-transform: perspective(300px) rotateX(20deg);transform: perspective(300px) rotateX(20deg);-webkit-transform-style: preserve-3d;transform-style: preserve-3d;-webkit-perspective: 10px;perspective: 10px;-webkit-perspective-origin: center center;perspective-origin: center center;transition: all 1.3s ease-out;will-change: perspective;}.all:hover {display: flex;-webkit-transform: perspective(10000px) rotateX(0deg);transform: perspective(10000px) rotateX(0deg);-webkit-perspective: 1000px;perspective: 1000px;transition: all 1.3s ease-in;}.all:hover .text {opacity: 1;}.all:hover > div {opacity: 1;transition-delay: 0s;}.all:hover .explainer {opacity: 0;}.left,.center,.right,.lefter,.righter {position: relative;width: 250px;height: 280px;background-color: #58d;background-repeat: no-repeat;background-position: center center;background-size: contain;background-blend-mode: color-burn;border: 1px solid rgba(255, 255, 255, 0.488);border-radius: 10px;box-shadow: 0 0 20px 5px rgba(100, 100, 255, 0.4);-webkit-transform-style: preserve-3d;transform-style: preserve-3d;cursor: pointer;opacity: 0;transition: all 0.3s ease;transition-delay: 1s;}.left:hover,.center:hover,.right:hover,.lefter:hover,.righter:hover {background-color: #ccf;box-shadow: 0 0 30px 10px rgba(100, 100, 255, 0.6);}.text {position: absolute;bottom: 0;left: 5px;color: #fff;text-shadow: 0 0 5px rgba(100, 100, 255, 0.6);-webkit-transform: translateY(30px);transform: translateY(30px);opacity: 0;transition: all 0.3s ease;will-change: transform;}.lefter {background-image: url(../assets/images/image/organization-512.png);-webkit-transform: translateX(-180px) translateZ(-50px) rotateY(-5deg);transform: translateX(-180px) translateZ(-50px) rotateY(-5deg);}.left {background-image: url(../assets/images/image/creative_draw-512.png);-webkit-transform: translateX(-150px) translateZ(-25px) rotateY(-5deg);transform: translateX(-150px) translateZ(-25px) rotateY(-5deg);}.center {position: absolute;top: 0;background-image: url(../assets/images/image/app_window-512.png);opacity: 1;}.right {background-image: url(../assets/images/image/cloud_weather-512.png);-webkit-transform: translateX(150px) translateZ(-25px) rotateY(5deg);transform: translateX(150px) translateZ(-25px) rotateY(5deg);}.righter {background-image: url(../assets/images/image/search-512.png);-webkit-transform: translateX(180px) translateZ(-50px) rotateY(5deg);transform: translateX(180px) translateZ(-50px) rotateY(5deg);}.explainer {display: flex;align-items: center;justify-content: center;width: 100%;height: 100%;color: #fff;font-weight: 300;font-size: 2rem;text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);background: linear-gradient(-45deg, #24ff71ca, #9b4effb7);background-color: #303050;border-radius: 10px;transition: all 0.6s ease;}}
