CSS3系列之3D制作方法案例

简介

本文是 CSS3 系列的第二篇，将为你讲解如何用 CSS3 制作 3D 效果。

3D 制作方法

在 CSS3 中，可以使用以下属性制作 3D 效果：

transform

transform 属性可以用来旋转、缩放、倾斜元素。在 3D 中，它可以用来将元素转换为 3D 空间中的物体。

使用方法：

transform: translateZ(100px);

perspective

perspective 属性用于定义视距效果。它必须与 transform 属性一起使用。

使用方法：

perspective: 500px;

transform-style

transform-style 属性用于指定子元素是否应用变换效果。

使用方法：

transform-style: preserve-3d;

示例说明

示例一：3D 立方体

查看示例

代码如下：

HTML：

<div class="cube">
  <div class="front">前面</div>
  <div class="back">后面</div>
  <div class="top">上面</div>
  <div class="bottom">下面</div>
  <div class="left">左面</div>
  <div class="right">右面</div>
</div>

CSS：

.cube {
  width: 200px;
  height: 200px;
  position: relative;
  transform-style: preserve-3d;
  perspective: 500px;
}
.cube div {
  position: absolute;
  width: 200px;
  height: 200px;
  background: rgba(255, 255, 255, 0.5);
  color: #000;
  font-size: 48px;
  line-height: 200px;
  text-align: center;
  transform-style: preserve-3d;
}
.front {
  transform: rotateY(0deg) translateZ(100px);
}
.back {
  transform: rotateY(180deg) translateZ(100px);
}
.top {
  transform: rotateX(90deg) translateZ(100px);
}
.bottom {
  transform: rotateX(-90deg) translateZ(100px);
}
.left {
  transform: rotateY(-90deg) translateZ(100px);
}
.right {
  transform: rotateY(90deg) translateZ(100px);
}

示例二：3D 图片墙

查看示例

代码如下：

HTML：

<div class="wall">
  <img src="https://picsum.photos/640/400" alt="">
  <img src="https://picsum.photos/640/400" alt="">
  <img src="https://picsum.photos/640/400" alt="">
  <img src="https://picsum.photos/640/400" alt="">
  <img src="https://picsum.photos/640/400" alt="">
  <img src="https://picsum.photos/640/400" alt="">
</div>

CSS：

.wall {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 900px;
  height: 400px;
  perspective: 1200px;
  margin: 0 auto;
}
img {
  width: 266px;
  height: 400px;
  margin-right: 10px;
  margin-bottom: 10px;
  transform-style: preserve-3d;
  transition: all ease-in-out 0.3s;
}
img:nth-child(3n) {
  transform: rotateY(90deg) translateZ(-200px);
}
img:nth-child(3n+2) {
  transform: translateZ(0);
}
img:hover {
  transform: rotateY(180deg) translateZ(240px);
}

在这个示例中，我们使用了 perspective 属性定义视距效果，并且使用了 transition 属性使鼠标滑过时的效果更加平滑。每一个 img 元素都被转换成一个 3D 物体，并且使用 transform 属性控制其位置和状态。