CSS伪3D透视效果示例

3D翻转卡片

当鼠标悬停在卡片上时，会以Y轴为中心旋转180度，展示背面内容。这一效果通过CSS的perspective和transform属性实现，结合transition实现平滑动画。

.card-container { perspective: 1500px; }
.card { 
  transition: transform 0.8s;
  transform-style: preserve-3d;
}
.card-container:hover .card {
  transform: rotateY(180deg);
}
.card-back { transform: rotateY(180deg); }

银行卡

Visa Platinum

**** **** **** 4589

安全码: 789

本卡为示例卡，仅用于展示3D效果

3D堆叠效果

多个元素堆叠在一起，通过translateZ属性创造深度感。当鼠标悬停时，每个元素会以不同的距离向前移动，形成错落有致的3D效果。

.stack-container:hover .stack-item:nth-child(1) {
  transform: translateZ(0px);
}
.stack-container:hover .stack-item:nth-child(2) {
  transform: translateZ(50px);
}
.stack-container:hover .stack-item:nth-child(3) {
  transform: translateZ(100px);
}

3D文字效果

通过多层text-shadow和perspective属性结合，创造出具有深度感的立体文字效果。这种技术常用于标题设计，能显著提升视觉冲击力。

.text-3d {
  transform: perspective(500px) rotateX(15deg);
  text-shadow: 
    1px 1px 0px #ccc,
    2px 2px 0px #ccc,
    3px 3px 0px #ccc,
    10px 10px 15px rgba(0, 0, 0, 0.3);
}

立体标题

3D TEXT

惊艳效果

3D立方体

由6个面组成的立方体，通过CSS的3D变换属性实现。每个面设置不同的旋转角度和Z轴位移，结合动画实现持续旋转效果，创造出完整的3D立方体视觉。

.cube {
  transform-style: preserve-3d;
  animation: rotateCube 15s infinite linear;
}
.cube-front  { transform: translateZ(100px); }
.cube-back   { transform: rotateY(180deg) translateZ(100px); }
.cube-right  { transform: rotateY(90deg) translateZ(100px); }
.cube-left   { transform: rotateY(-90deg) translateZ(100px); }
.cube-top    { transform: rotateX(90deg) translateZ(100px); }
.cube-bottom { transform: rotateX(-90deg) translateZ(100px); }

前

后

右

左

上

下

3D旋转画廊

一组图片围绕Y轴排列形成环形，通过CSS动画实现持续旋转效果，创造出沉浸式的3D画廊体验。每张图片都有自己的旋转角度和位置，共同构成一个完整的圆形。

.gallery {
  transform-style: preserve-3d;
  animation: rotateGallery 30s infinite linear;
}
.gallery-item:nth-child(1) {
  transform: rotateY(0deg) translateZ(300px);
}
.gallery-item:nth-child(2) {
  transform: rotateY(72deg) translateZ(300px);
}