CSS3 3D位移translate效果实例介绍

让我来为您详细讲解“CSS3 3D位移translate效果实例介绍”完整攻略。

简介

CSS3 3D位移translate效果是利用CSS3的transform属性实现的一种动画效果，可以在多维度上改变元素的位置，实现复杂的动画效果，比如折叠、旋转、滑动等。

基本用法

下面的示例演示了如何使用CSS3 3D位移translate效果，将一个div元素向右平移100像素：

div {
    transform: translateX(100px);
}

上述代码将div元素沿着X轴向右平移100像素。

深入探究

细节说明

translate()函数有两个参数，分别表示在X轴和Y轴上的位移量，可以用负值表示元素向上或向左移动。如果只设置一个值，表示在X轴上进行位移。translate3d()函数有三个参数，分别表示在X轴、Y轴和Z轴上的位移量，可以用负值表示元素向自己内部移动。

示例说明

下面的示例展示了如何使用translate()函数实现一个旋转立方体的动画效果。代码如下：

<div class="cube">
  <div class="face1">1</div>
  <div class="face2">2</div>
  <div class="face3">3</div>
  <div class="face4">4</div>
  <div class="face5">5</div>
  <div class="face6">6</div>
</div>

.cube {
  position: relative;
  margin: 50px auto;
  height: 100px;
  width: 100px;
  transform-style: preserve-3d;
  transform: perspective(1000px) rotateY(0deg);
  animation: spin 8s infinite linear;
}

@keyframes spin {
  from {
    transform: perspective(1000px) rotateY(0deg);
  }
  to {
    transform: perspective(1000px) rotateY(360deg);
  }
}

.cube div {
  position: absolute;
  height: 100px;
  width: 100px;
  background-color: transparent;
  color: white;
  font-size: 80px;
  text-align: center;
  line-height: 100px;
  font-weight: bold;
}

.face1 {
  background-color: blue;
  transform: rotateX(-90deg) translateZ(50px);
}

.face2 {
  background-color: purple;
  transform: rotateX(90deg) translateZ(50px);
}

.face3 {
  background-color: green;
  transform: translateZ(50px);
}

.face4 {
  background-color: orange;
  transform: rotateY(-90deg) translateZ(50px);
}

.face5 {
  background-color: red;
  transform: rotateY(90deg) translateZ(50px);
}

.face6 {
  background-color: yellow;
  transform: rotateY(180deg) translateZ(50px);
}

上述代码中，我们使用了transform-style: preserve-3d属性来启用3D立体效果并且设置perspective(1000px)属性来设置用户的观察点距离屏幕的距离，以便产生透视效果。通过设置不同的transform属性，我们将立方体的每个面进行不同的3D位移translate效果，从而实现旋转立方体的动画效果。