CSS3 3D 转换学习笔记

介绍

CSS3 3D 转换是一种可以在三维空间中操作元素的技术，它使得我们可以在 Web 页面中创建出具有立体感和层次感的交互效果。通过使用 CSS3 3D 转换，开发者可以更加灵活地变换元素的大小、形状和位置，以此来实现更加吸引人的用户界面。

实例演示

立方体旋转效果

下面是一个使用 CSS3 3D 转换实现的立方体旋转效果的代码示例。

HTML 代码：

htmlCopy Code
<div class="cube">
  <div class="front">前面</div>
  <div class="back">后面</div>
  <div class="left">左边</div>
  <div class="right">右边</div>
  <div class="top">顶面</div>
  <div class="bottom">底面</div>
</div>

CSS 代码：

cssCopy Code
.cube {
  width: 200px;
  height: 200px;
  position: relative;
  transform-style: preserve-3d;
  animation: rotate 8s infinite linear;
}

.cube div {
  position: absolute;
  width: 200px;
  height: 200px;
  background: rgba(255, 255, 255, 0.9);
  text-align: center;
  line-height: 200px;
  font-size: 40px;
}

.front {
  transform: translateZ(100px);
}

.back {
  transform: translateZ(-100px) rotateY(180deg);
}

.left {
  transform: translateX(-100px) rotateY(-90deg);
}

.right {
  transform: translateX(100px) rotateY(90deg);
}

.top {
  transform: translateY(-100px) rotateX(90deg);
}

.bottom {
  transform: translateY(100px) rotateX(-90deg);
}

@keyframes rotate {
  from {
    transform: rotateY(0);
  }
  to {
    transform: rotateY(360deg);
  }
}

3D 环绕效果

下面是一个使用 CSS3 3D 转换实现的 3D 环绕效果的代码示例。

HTML 代码：

htmlCopy Code
<div class="wrapper">
  <div class="box-container">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
    <div class="box">6</div>
  </div>
</div>

CSS 代码：

cssCopy Code
.wrapper {
  width: 400px;
  height: 400px;
  perspective: 800px;
  position: relative;
}

.box-container {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  animation: rotate 10s infinite linear;
}

.box {
  width: 50px;
  height: 50px;
  background: rgba(255, 255, 255, 0.9);
  position: absolute;
  text-align: center;
  line-height: 50px;
  font-size: 20px;
}

.box:nth-child(1) {
  transform: rotateY(0deg) translateZ(200px);
}

.box:nth-child(2) {
  transform: rotateY(60deg) translateZ(200px);
}

.box:nth-child(3) {
  transform: rotateY(120deg) translateZ(200px);
}

.box:nth-child(4) {
  transform: rotateY(180deg) translateZ(200px);
}

.box:nth-child(5) {
  transform: rotateY(240deg) translateZ(200px);
}

.box:nth-child(6) {
  transform: rotateY(300deg) translateZ(200px);
}

@keyframes rotate {
  from {
    transform: rotateY(0);
  }
  to {
    transform: rotateY(360deg);
  }
}

结论

CSS3 3D 转换是一种非常有用的技术，它可以让我们在 Web 页面中创造出具有立体感和层次感的交互效果。通过使用 CSS3 3D 转换，开发者可以更加灵活地变换元素的大小、形状和位置，从而实现更加吸引人的用户界面。