3D转换，透视 perspective，3D呈现 transform-style，浏览器私有前缀

3D 转换 transform

3d效果是建立在已经存在视距（perspective）的情况下进行的

3D 坐标系

三维坐标其实就是指立体空间，立体空间由3个轴组成

• x轴：水平向右；注意：x右边是正值，左边是负值；
• y轴：垂直向下；注意 ：y下面是正值，上面是负值；
• z轴：垂直屏幕；注意：往外面是正值，往里面是负值；

3D移动 translate3d

3D移动在2D移动的基础上多加了一个移动的方向，就是z轴方向；

transform: translateZ(100px); /* translateZ一般用px单位 */
transform: translate3d(x, y, z);

透视 perspective

在2D平面产生近大远小视觉立体，但是只是效果是二维的

• 如果想要网页产生3D效果需要透视（理解成3D物体投影在2D平面上）；
• 模拟人类的视觉位置，
• 透视我们也称为视距，视距就是人的眼睛到屏幕的距离；
• 距离视觉点越近的电脑平面成像越大，反之亦然；
• 透视的单位是像素；

透视写在被观察元素的父盒子上面

d：就是视距，视距就是一个距离人的眼睛到屏幕的距离

z：就是z轴，物体距离屏幕的距离，z轴越大（正值）我们看到的物体就越大

perspective: 100px;

3D旋转 rotate3d

3D旋转可以让元素在三维平面内沿着x ，y，z轴或者自定义轴进行旋转；

transform: rotateX(45deg);
transform: rotateY(45deg);
transform: rotateZ(0deg);
transform: rotate3d(x, y, z, deg);
/* 示例 */
transform: rotate3d(1, 0, 0, 45deg); /* x轴旋转45deg */

3D呈现 transform-style

/* 控制子元素是否开启三维立体环境 要写给父级元素 */
transform-style: flat; /* 默认 子元素不开启3d立体空间*/
transform-style: preserve-3d; /* 子元素开启3d立体空间 */

浏览器私有前缀

浏览器私有前缀是为了兼容老版本的写法，比较新的版本无需添加

• -moz- ：代表Firefox浏览器私有属性；
• -ms-：代表IE浏览器私有属性；
• -webkit-：代表Safari，Chrome私有属性；
• -o-：代表Opera私有属性。

旋转木马案例

<!-- html代码结构 -->
<section>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</section>

/* css 代码结构 */
body {
  perspective: 1000px;
}
section {
  position: relative;
  width: 300px;
  height: 200px;
  margin: 100px auto;
  transform-style: preserve-3d;
  animation: rotate 3s linear 0.5s infinite;
}
section:hover {
  animation-play-state: paused;
}
section div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(./data/dog.jpg) no-repeat;
}
section div:nth-child(1) {
  transform: translateZ(300px);
}
section div:nth-child(2) {
  transform: rotateY(60deg) translateZ(300px);
}
section div:nth-child(3) {
  transform: rotateY(120deg) translateZ(300px);
}
section div:nth-child(4) {
  transform: rotateY(180deg) translateZ(300px);
}
section div:nth-child(5) {
  transform: rotateY(240deg) translateZ(300px);
}
section div:nth-child(6) {
  transform: rotateY(300deg) translateZ(300px);
}
@keyframes rotate {
  0% {
    transform: rotateY(0);
  }
  100% {
    transform: rotateY(360deg);
  }
}

3D转换，透视 perspective，3D呈现 transform-style，浏览器私有前缀

原文：https://www.cnblogs.com/article-record/p/12482054.html