CSS 3D旋转

在本文中，我们将介绍CSS中的3D旋转。3D旋转是Web开发领域中非常重要的动画技术之一，它可以使页面元素具有视觉效果和交互性。在本文中，我们将探讨CSS3的3D变换、3D动画及应用，并介绍几个实用的例子。

阅读更多：CSS 教程

什么是CSS 3D变换？

在CSS中，我们使用3D变换改变元素在3D空间内的视角和角度，从而创建3D效果。其中，主要包含以下几个属性：

perspective属性

该属性定义了元素的透视视图，也就是视觉效果，它将决定在屏幕上前后景看起来有多远。通常我们会将该属性定义在父元素上，来影响所有子元素。

语法：perspective: length|none|initial|inherit;

其中，常用的值可以是一个长度值或者 none，如果继承自父元素则使用initial或inherit。

transform-style属性

该属性定义了如何应用变换，我们可以选择在CSS的3D变换中选择保留css本身的定义还是应用3D效果。

语法：transform-style: preserve-3d|flat|initial|inherit;

preserve-3d：保留元素的3D定义。
flat：元素的子元素不继承元素的3D效果。
initial：默认值。
inherit：从父元素继承。

transform属性

该属性定义了元素如何变换、旋转、缩放和倾斜等。我们可以将它理解成一种针对元素的矩阵变换。其中，translate、rotate和scale是最常用的属性。外加缩放属性。我们在使用时通常这样定义：

语法：transform: (rotate|translate|scale|skew)X(Y) Z

例如，我们可以通过以下代码将一个矩形元素旋转45度：

.box {
  transform: rotateY(45deg);
}

transform-origin属性

它定义了变换的中心点。注意，中心点不一定是元素的中心点，这取决于transform-origin的值。

语法：transform-origin: x-offset|y-offset|z-offset|initial|inherit

示例：我们可以通过以下代码将立方体在X轴上按照顺时针成180度旋转和缩小5倍：

.box {
  transform-style: preserve-3d;
  perspective: 500px;
  transform: rotateX(180deg) scale(0.2);
  transform-origin: center center;
  width: 200px;
  height: 200px;
  position: relative;
}

CSS 3D动画

我们可以通过 CSS 3D动画来创建一个3D旋转的动画效果。同样使用@keyframes我们可以定义动画帧，然后将动画基于这些帧映射到元素上。

具体代码实现如下：

@media (min-width: 768px) {
  .cube {
    perspective: 700px; /* 高度值，带有透视的视图距离观察者的距离合适。 */
    position: relative;
    width: 240px;
    height: 240px;
    margin: 50px auto;
  }
  .cube .side {
    position: absolute;
    border: 2px solid white;
    width: 240px;
    height: 240px;
    backface-visibility: hidden;
  }
  .cube .front {
    background-image: url('../images/front.jpg');
    transform: rotateY(90deg) translateX(120px);
  }
  .cube .back {
    background-image: url('../images/back.jpg');
    transform: rotateY(-90deg) translateX(-120px);
  }
  .cube .right {
    background-image: url('../images/right.jpg');
    transform: rotateY(-90deg) rotateZ(-90deg) translateY(120px);
  }
  .cube .left {
    background-image: url('../images/left.jpg');
    transform: rotateY(90deg) rotateZ(-90deg) translateY(-120px);
  }
  .cube .top {
    background-image: url('../images/top.jpg');
    transform: rotateX(-90deg) rotateZ(-90deg) translateZ(120px);
  }
  .cube .bottom {
    background-image: url('../images/bottom.jpg');
    transform: rotateX(90deg) rotateZ(-90deg) translateZ(-120px);
  }
  /* 定义3D动画 */
  @keyframes spin {
    from { transform: rotateY(0); }
    to { transform: rotateY(360deg); }
  }
  /* 将动画应用到元素上 */
  .cube:hover {
    animation-name: spin;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
  }
}

CSS 3D旋转实例

1. 3D立方体

通过使用实例中的代码，你可以创造一个3D立方体，并将鼠标悬浮在上面时，它开始旋转。

<div class="cube">
  <div class="side front"></div>
  <div class="side back"></div>
  <div class="side right"></div>
  <div class="side left"></div>
  <div class="side top"></div>
  <div class="side bottom"></div>
</div>

2. 3D翻转卡片

这个示例展示了如何使用3D旋转创建一种翻转卡片的效果，用户鼠标移上去时将卡片翻转至显示背面。效果如下：

<body>
  <div class="card">
    <div class="front">前面</div>
    <div class="back">后面</div>
  </div>
</body>

.card {
  position: relative;
  width: 200px;
  height: 200px;
  transform-style: preserve-3d;
  transition: transform 1s cubic-bezier(0.75, 0.25, 0.25, 0.75);
}
.card:hover {
  transform: rotateY(180deg);
}
.front, .back {
  position: absolute;
  width: 200px;
  height: 200px;
  backface-visibility: hidden;
}
.front {
  background-color: #40c3fb;
  color: #fff;
}
.back {
  transform: rotateY(180deg);
  background-color: #be1e2d;
  color: #fff;
}