CSS3-3D变换

简介

在 CSS3 中，我们可以使用 3D 变换函数，通过对元素进行简单的设置，将元素呈现立体的效果。CSS3-3D变换在现代Web开发中经常被运用，它可以为网站注入更多的动态和时尚感。

变换函数

CSS3 提供了四个旋转和三个移动的变换函数，可用于实现 3D 效果。以下是详细的介绍：

旋转函数

rotateX

通过指定度数，使元素以 X 轴为轴心进行旋转。

transform:rotateX(度数);

rotateY

通过指定度数，使元素以 Y 轴为轴心进行旋转。

transform:rotateY(度数);

rotateZ

通过指定度数，使元素以 Z 轴为轴心进行旋转。

transform:rotateZ(度数);

rotate3d

可以同时指定 X、Y、Z 三个轴心的旋转度数。

transform:rotate3d(X轴, Y轴, Z轴, 度数);

移动函数

translateX

使元素沿 X 轴移动指定的距离。

transform:translateX(距离);

translateY

使元素沿 Y 轴移动指定的距离。

transform:translateY(距离);

translateZ

使元素沿 Z 轴移动指定的距离。

transform:translateZ(距离);

应用示例

立方体

通过使用 CSS3-3D 变换函数可以轻松地创建一个立方体。以下是示例代码：

<div class="cube">
  <div class="front">FRONT</div>
  <div class="back">BACK</div>
  <div class="top">TOP</div>
  <div class="bottom">BOTTOM</div>
  <div class="left">LEFT</div>
  <div class="right">RIGHT</div>
</div>

.cube {
  width: 200px;
  height: 200px;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(-30deg) rotateY(45deg);
}
.cube div {
  position: absolute;
  width: 200px;
  height: 200px;
  line-height: 200px;
  font-size: 24px;
  text-align: center;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid #999;
}
.front {
  transform: 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 旋转球体

下面是一个示例代码，它可以创建一个 3D 旋转球体。

<div class="sphere">
  <div class="layer layer1">
    <div class="circle"></div>
  </div>
  <div class="layer layer2">
    <div class="circle"></div>
  </div>
  <div class="layer layer3">
    <div class="circle"></div>
  </div>
  <div class="layer layer4">
    <div class="circle"></div>
  </div>
  <div class="layer layer5">
    <div class="circle"></div>
  </div>
  <div class="layer layer6">
    <div class="circle"></div>
  </div>
</div>

.sphere {
  position: relative;
  width: 300px;
  height: 300px;
  margin: 100px auto 0;
  transform-style: preserve-3d;
  transform: perspective(500px) rotateX(0deg) rotateY(-20deg);
}
.layer {
  position: absolute;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}
.layer1 { transform: rotateY(0deg) translateZ(74px); }
.layer2 { transform: rotateY(120deg) translateZ(74px); }
.layer3 { transform: rotateY(240deg) translateZ(74px); }
.layer4 { transform: rotateY(60deg) translateZ(224px); }
.layer5 { transform: rotateY(180deg) translateZ(224px); }
.layer6 { transform: rotateY(300deg) translateZ(224px); }
.circle {
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid #999;
  transform-style: preserve-3d;
  animation-name: rotate;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
@keyframes rotate {
  from { transform: rotateY(0deg); }
  to { transform: rotateY(360deg); }
}

结束语

CSS3-3D 变换可以通过对元素应用旋转和移动的变换函数，轻松地创建出立体的效果。它广泛应用于现代 Web 开发，为网站注入更多的动态和时尚感。