这是一个快速屏幕录制，演示如何创建一个 3D 图片悬停效果，同时为不支持 3D 变换的浏览器提供有用的界面。如果您想在 Firefox 中查看效果，请获取最新的 Aurora 或 Nightly 版本。观看以下视频以了解效果（首先是使用不支持 CSS 3D 变换的浏览器，然后是使用较新版本的浏览器）

屏幕录制位于 YouTube 上

实现该效果的主要流程很简单。首先，我们需要一种语义上有价值的方式来显示这些图像，在本例中，我们使用包含图形和图注的 HTML 列表。请注意，图像仍然需要备用文本，因为图注可以应用于多个图像。

然后，我们将图注绝对定位在列表项内，为列表项设置尺寸并将其溢出设置为隐藏，并将图注移到可见区域之外。当用户将鼠标悬停在列表项上（或使用键盘聚焦它）时，我们将图注移动到正确的位置并降低图像的不透明度。

.positioned {
  list-style: none;
  width: 300px;
  height: 200px;
  position: relative;
}
.positioned figcaption {
  position: absolute;
  background: rgba( 0, 0, 0, 0.7 );
  color: #fff;
  border-radius: 5px;
  left: 65px;
  bottom: 10px;
  width: 230px;
}
.positioned img {
  opacity:0.4 ;
}
.positioned figcaption strong {
  display: block;
  color: lime;
  font-weight: normal;
  font-size:22px;
  padding: 5px 0;
}
.positioned figcaption p {
  display: block;
  color: white;
  padding: 5px;
}
.interactive {
  overflow: hidden;
}
.interactive img {
  opacity: 1;
}
.interactive figcaption {
  left: 300px;
}
.interactive:hover img, .interactive:focus img {
  opacity: 0.4;
}
.interactive:hover figcaption, .interactive:focus figcaption {
  left: 75px;
}

我们通过添加过渡来使效果平滑。请注意，列出所有浏览器前缀并设置一个无前缀的回退是有意义的。这样，当新的浏览器支持它们时，我们就不需要重写代码。

.smooth img {
  -webkit-transition: all 1s;
  -moz-transition:    all 1s;
  -o-transition:      all 1s;
  -ms-transition:     all 1s;
  transition:         all 1s;
}
.smooth figcaption {
  -webkit-transition: all 1s;
  -moz-transition:    all 1s;
  -ms-transition:     all 1s;
  -o-transition:      all 1s;
  transition:         all 1s;
}

为了在 3D 空间中旋转小猫，我们需要为列表项设置透视，并使用 translate3D 在 3D 空间中旋转和移动图像以避免裁剪。

.threed {
  -webkit-perspective: 800px;
  -moz-perspective:    800px;
  -ms-perspective:     800px;
  -o-perspective:      800px;
  perspective:         800px;
}
.threed:hover img, .threed:focus img {
  -webkit-transform: rotateY( 50deg ) rotateX( 10deg )
                     translate3d( 80px, -20px, -100px );
  -moz-transform:    rotateY( 50deg ) rotateX( 10deg )
                     translate3d( 80px, -20px, -100px );
  -o-transform:      rotateY( 50deg ) rotateX( 10deg )
                     translate3d( 80px, -20px, -100px );
  -ms-transform:     rotateY( 50deg ) rotateX( 10deg )
                     translate3d( 80px, -20px, -100px );
  transform:         rotateY( 50deg ) rotateX( 10deg )
                     translate3d( 80px, -20px, -100px );
}

就是这样。通过添加所有浏览器前缀，回退到简单的悬停效果，并确保在悬停和聚焦时执行效果，您可以支持所有浏览器，并为最新的浏览器带来酷炫的效果。

更多阅读和资源

• 独立示例
• 分步示例
• GitHub 源代码
• 详细博客文章