公众号推文3D卡片悬浮怎么做

要实现公众号推文的3D卡片悬浮效果，可以采用CSS3的transform属性和transition属性结合实现。

步骤如下：

1.创建一个卡片容器的div，并设置该div的position属性为relative。

2.卡片容器内部再创建两个div，分别为卡片的正面和反面，设置这两个div的position属性为absolute。

3.正面和反面的div在卡片容器内部通过transform属性做出3D旋转效果。

4.为卡片容器的鼠标事件添加动画效果，当鼠标悬浮在卡片容器上时，通过transition属性，使卡片容器和卡片的正反面都有一个从静止到旋转的过渡效果，当鼠标离开时，同样有一个反向的过渡效果。

具体代码实现可以参考下面的示例：

<div class="card-container">
  <div class="card-front"></div>
  <div class="card-back"></div>
</div>

.card-container {
  position: relative;
  width: 200px;
  height: 300px;
  perspective: 1000px; /* 透视效果，确定旋转的视角距离 */
  cursor: pointer;
}

.card-front, .card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden; /* 隐藏反面的div */
  transition: all 0.5s ease-in-out; /* 过渡效果 */
}

.card-front {
  background: #fff;
  transform: rotateY(0deg); /* 初始状态为正面 */
}

.card-back {
  background: #f00;
  transform: rotateY(-180deg); /* 初始状态为反面 */
}

.card-container:hover .card-front {
  transform: rotateY(180deg); /* 鼠标悬浮时正面旋转180度 */
}

.card-container:hover .card-back {
  transform: rotateY(0deg); /* 鼠标悬浮时反面旋转180度 */
}

通过上述代码可以实现一个简单的3D卡片悬浮效果，你可以根据实际需要进行修改和优化。