如何实现CSS 3D悬浮效果？hover时显示隐藏的description区块

没问题，我来帮你搞定这个悬浮显示的需求！先看你的HTML结构，我们可以通过纯CSS来实现初始隐藏、hover显示的效果，还能加上你想要的CSS3 3D悬浮增强体验，具体方案如下：

你的原始HTML结构 #

<div class="com-wrapper"> 
  <div class="front"> 
    <div class="com-icon"> 
      <img src="images/household.png" alt="laptop logo"> 
    </div> 
    <div class="com-text"> 
      <p>Household</p> 
    </div> 
  </div> 
  <div class="description"> 
    <ul> 
      <li>Plumber and Electrician</li> 
      <li>Cleaning Service</li> 
      <li>Carpentry</li> 
      <li>Agriculture</li> 
    </ul> 
  </div> 
</div>

基础实现：hover时显示隐藏内容 #

首先解决核心需求：初始隐藏.description，鼠标悬停时显示。这里推荐监听父容器.com-wrapper的hover事件，这样鼠标移到显示出来的.description上时不会突然消失，体验更流畅。

/* 初始隐藏description，用opacity+visibility配合过渡动画 */
.description {
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease; /* 平滑过渡动画 */
}

/* 父容器hover时，让description显示 */
.com-wrapper:hover .description {
  opacity: 1;
  visibility: visible;
}

为什么不用display: none？因为display属性无法参与CSS过渡动画，用opacity和visibility结合既能隐藏元素，又能实现平滑的显示/隐藏效果。

升级：添加CSS3 3D悬浮效果 #

如果想要让整个组件有立体悬浮的质感，我们可以给父容器添加透视效果，配合3D变换让hover过程更生动：

/* 父容器开启3D透视空间 */
.com-wrapper {
  perspective: 1000px;
  display: inline-block; /* 让容器自适应内容宽度 */
  position: relative;
  margin: 1rem;
}

/* front区域基础样式，开启3D变换继承 */
.front {
  padding: 1.2rem;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
  transform-style: preserve-3d;
  cursor: pointer;
}

/* description初始状态，设置3D位置和过渡 */
.description {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  width: 100%;
  padding: 1rem;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  transform: translateZ(-20px); /* 初始在3D空间靠后位置 */
}

/* hover时的3D悬浮效果 */
.com-wrapper:hover .front {
  transform: rotateX(6deg) translateY(-6px); /* 轻微上抬+旋转，模拟悬浮感 */
}

.com-wrapper:hover .description {
  opacity: 1;
  visibility: visible;
  transform: translateZ(0); /* 回到正常3D层级 */
}

效果说明 #

• 初始状态下，.description完全隐藏，只有.front区域可见
• 鼠标悬停时，.front会轻微上抬并旋转，营造立体悬浮的视觉效果
• 同时.description会平滑显示出来，从3D空间的靠后位置过渡到正常层级，整个过程流畅自然

内容的提问来源于stack exchange，提问作者Ashutosh Shrestha