3D翻转 （CSS+HTML）

3D翻转 （CSS+HTML）

• transform-style: preserve-3d 三维效果

• perspective and perspective-origin 3D视距，透视/景深效果

transform-style属性

要利用 CSS3 实现 3D 的效果，最主要的就是借助 transform-style 属性。

transform-style 只有两个值可以选择：

// 语法：

transform-style: flat/preserve-3d;

transform-style: flat; // 默认，子元素将不保留其 3D 位置

transform-style: preserve-3d; // 子元素将保留其 3D 位置。

当我们指定一个容器的 transform-style 的属性值为 preserve-3d 时，容器的后代元素便会具有 3D 效果，这样说有点抽象，也就是当前父容器设置了 preserve-3d 值后，它的子元素就可以相对于父元素所在的平面，进行 3D 变形操作。

当父元素设置了 transform-style:preserve-3d 后，就可以对子元素进行 3D 转换操作了，3D 转换和 2D 转换一样操作，使用 transform 属性来设置，或者可以通过制定的函数或者通过三维矩阵来对元素变型操作：

1、使用 translateX(length) 、translateY(length) 、 translateZ(length) 来进行 3D 位移操作，与 2D 操作一样，对元素进行位移操作，也可以合并为 translate3d(x,y,z) 这种写法；

2、使用 scaleX() 、scaleY() 、scaleY() 来进行3D 缩放操作，也可以合并为 scale3d(number,number,number) 这种写法；

3、使用 rotateX(angle) 、rotateY(angle) 、rotateZ(angle) 来进行 3D 旋转操作（角度变换），也可以合并为 rotate3d(Xangle,Yangle,Zangle) 这种写法。

transform 属性

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

none	定义不进行转换。
matrix(n,n,n,n,n,n)	定义 2D 转换，使用六个值的矩阵。
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate(x,y)	定义 2D 转换。
translate3d(x,y,z)	定义 3D 转换。
translateX(x)	定义转换，只是用 X 轴的值。
translateY(y)	定义转换，只是用 Y 轴的值。
translateZ(z)	定义 3D 转换，只是用 Z 轴的值。
scale(x,y)	定义 2D 缩放转换。
scale3d(x,y,z)	定义 3D 缩放转换。
scaleX(x)	通过设置 X 轴的值来定义缩放转换。
scaleY(y)	通过设置 Y 轴的值来定义缩放转换。
scaleZ(z)	通过设置 Z 轴的值来定义 3D 缩放转换。
rotate(angle)	定义 2D 旋转，在参数中规定角度。
rotate3d(x,y,z,angle)	定义 3D 旋转。
rotateX(angle)	定义沿着 X 轴的 3D 旋转。
rotateY(angle)	定义沿着 Y 轴的 3D 旋转。
rotateZ(angle)	定义沿着 Z 轴的 3D 旋转。
skew(x-angle,y-angle)	定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle)	定义沿着 X 轴的 2D 倾斜转换。
skewY(angle)	定义沿着 Y 轴的 2D 倾斜转换。
perspective(n)	为 3D 转换元素定义透视视图。

perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。

遇到问题：

1.背面文字未被隐藏

代码：

CSS部分

HTML部分

正如上面所说，当前父容器设置了 preserve-3d 值后，它的子元素就可以相对于父元素所在的平面，进行 3D 变形操作。我的理解是，front、back类的div设置3D变形，可以使图片、文字进行3D变形（确实可以 只是翻转后文字未被隐藏）。
解决办法：在block类的div再设置3D转换便可解决该问题。

2.文字3D翻转未显示

原因：

transform: translateZ(tz);
translateZ(tz)`相当于`translate3d(0, 0, tz)
tz表示平移矢量的z分量的<length>值。正值将元素移向观察者，负值则远离。
例：transform: translateZ(100px);

transfrom:rotate(a);
rotateX(a)相当于rotate3d(1, 0, 0, a)。
a是代表旋转的角度<angle>。正角度表示顺<angle>时针旋转，负角度表示逆时针旋转。 
例：transfrom: rotateY(180deg)

附：
CSS源代码：

* {
  margin: 0;
  padding: 0;
}

body {
  width: 100vw;
  height: 100vh;
  background-color: #e4e4d9;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  font-family: 'Montserrat', sans-serif, Arial, 'Microsoft Yahei';
  color: #FFF;
}

.block {
  position: relative;
  height: 350px;
  width: 250px;
  /* 3D变形 */
  perspective: 1000px;
  transform-style: preserve-3d;
}

.front, .back {
  position: absolute;
  /* background-color: #83a4d4; */
  width: 100%;
  height:100%;
  border-radius: 20px;
  /* 内容居中 */
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  /* 背景居中 */
  background-size: cover;
  background-position: center;
  /* 3D变形 */
  perspective: 1000px;
  transform-style: preserve-3d;
  /* 隐藏所有翻转信息 */
  backface-visibility: hidden;
  /* 翻转时间 */
  transition: .8s ease-in-out;
 
}

.front {
  background-image: url(zodiac.jpg);
}

.back {
  background-image: url(the\ slaveepic.jpg);
  /* 调转180度 */
  transform: rotateY(180deg);
}

.contents {
  /* 形成文字与背景分离 在3D空间沿Z轴定义元素 */
  transform: translateZ(120px);
} 

.block:hover .front{
  /* 把前面的图片翻转到后面 */
  transform: rotateY(180deg);
}
.block:hover .back{
  /* 把后面的图片翻转到前面 */
  transform: rotateZ(0deg);
}

展示