css3实现3d旋转动画特效

下面是实现 CSS3 3D 旋转动画特效的完整攻略：

1. 利用 transform 属性实现旋转

在 CSS3 中，一个重要的属性 transform 用于对元素进行转换操作，包括旋转、平移、缩放、倾斜等，其中利用 rotateX()、rotateY() 和 rotateZ() 可以对元素进行 3D 旋转，分别代表绕 X 轴、Y 轴和 Z 轴旋转。

下面以 rotateX() 为例，实现 3D 立方体的旋转效果，具体实现步骤：

1. 定义 HTML 代码结构，包括立方体的 6 个面，其中利用 backface-visibility 属性将背面设置为不可见。

<div class="box">
  <div class="front">Front</div>
  <div class="back">Back</div>
  <div class="left">Left</div>
  <div class="right">Right</div>
  <div class="top">Top</div>
  <div class="bottom">Bottom</div>
</div>

1. 利用 CSS3 的 transform 属性和 rotateX() 函数对立方体进行 3D 旋转，再利用 transition 属性设置旋转过程的持续时间和缓动函数。

.box {
  position: relative;
  width: 200px;
  height: 200px;
  transform-style: preserve-3d;
  transition: all 1s ease-in-out;
}
.box div {
  position: absolute;
  width: 200px;
  height: 200px;
  color: white;
  font-size: 30px;
  text-align: center;
  line-height: 200px;
  backface-visibility: hidden; /* 翻转时背面不可见 */
  border: 1px solid white; /* 边框方便查看 */
}
.front {
  background-color: red;
  transform: translateZ(100px);
}
.back {
  background-color: green;
  transform: rotateX(180deg) translateZ(100px);
}
.left {
  background-color: blue;
  transform: rotateY(-90deg) translateZ(100px);
}
.right {
  background-color: yellow;
  transform: rotateY(90deg) translateZ(100px);
}
.top {
  background-color: purple;
  transform: rotateX(90deg) translateZ(100px);
}
.bottom {
  background-color: orange;
  transform: rotateX(-90deg) translateZ(100px);
}

这样，我们就完成了一个基于 rotateX() 函数的 3D 旋转立方体效果。

2. 利用 animation 属性实现旋转动画

在上面的例子中，我们利用 transition 属性实现了旋转动画，并控制旋转结束时的状态。除了 transition，还可以利用 animation 属性实现更加复杂的动画效果。

下面以一个气球漂浮的例子，展示如何利用 animation 属性实现旋转动画。具体实现步骤：

1. 定义 HTML 代码结构，包括气球和环境。

<div class="container">
  <div class="balloon"></div>
  <div class="ground"></div>
  <div class="sky"></div>
</div>

1. 利用 CSS3 的 animation 属性和 @keyframes 规则实现动画效果，其中 translateY() 和 rotateZ() 分别对气球进行上下平移和环绕旋转，利用 ease-out 缓动函数使得气球自然停下，并且在动画结束时将气球的位置保存下来。

.balloon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 150px;
  background-image: linear-gradient(to bottom, red, yellow);
  border-radius: 50% 50% 40% 40%;
  transform: translate(-50%, -50%) translateY(-200px) rotateZ(-20deg);
  animation: rise 4s ease-out forwards;
}
@keyframes rise {
  0% {
    transform: translate(-50%, -50%) translateY(-200px) rotateZ(-20deg);
  }
  50% {
    transform: translate(-50%, -50%) translateY(-350px) rotateZ(20deg);
  }
  100% {
    transform: translate(-50%, -50%) translateY(-500px) rotateZ(20deg);
  }
}

这样，我们就完成了一个利用 animation 属性和 @keyframes 规则实现的气球漂浮动画。