transform 知识补充

rotate的坐标轴和默认值

z轴可以看成正对着自己脸的一根轴，每个轴的旋转方向默认如图箭头所示。

所有的旋转角度，正值都是根据默认的旋转方向来得，负值则是相反。

transform: rotateZ(45deg);

只有Z轴的旋转再二维的界面才是有效的，如下图所示：

因为在二维的界面Z轴的变化才是有效的，所以默认值的设置就是Z轴，所以简写形式等效于rotateZ

transform: rotate(45deg); /*等同于rotateZ(45deg)*/

translate

translate的变化是根据元素的坐标轴而变化的，比如X轴移动100px;

transform: translateX(100px);

正常情况下就是往右侧移动了100px距离，但是当我们改变元素的坐标轴的时候，效果就不一样了。

transform: rotate(90deg) translateX(100px);

元素旋转90度后，X轴变成往下的，于是元素往下走了100px

所以，元素的坐标轴不是固定位置的，他是会发生变化的，且与元素保持相对定位一样。

Z轴

在设置了视角和视距后，z轴才会真正的有效，当z轴正值越来越大的时候，表示我们越来越近，所以元素会变得越来越大，负值则是相反

perspective 视距

3d的变化，没有视距的情况下你很难明白它为啥会变成这个吊样，以rotate为例，当你设置rotateX(45deg)时，你应该只会发现元素好像变矮了。

当我们给transform设置视距的时候，就会看到真正的效果了。

.box {
    width: 100px;
    height: 100px;
    background-color: antiquewhite;
    transform: perspective(1000px) rotateX(45deg);
}

视距的px值越大，表示离图像越远，看着就越小，越远就表示看的越不清楚，效果也是越差，越近看的东西就很很大，也不好，所以这个值适中就行。

注意不能为负值，毕竟一个人用眼睛去看这个东西，总不可能从物体的后面往前看，但是头却在物体的正前方吧。明显的不合理。你只能改变你看的位置和角度，也就是移动头的位置。

事实上并不推荐直接在transform中写perspective；这个属性一般是建议在父级元素设置。

放在父元素的好处就是，所有的子元素3d变化都是同一个视角，但是需要注意的是，父元素的大小会对视角产生影响。往往子元素自己的视角放到父元素上就不一样了，可以试试让父元素inline-block。

.wrap {
    display: inline-block;
    perspective: 1000px;
}

.box {
    width: 100px;
    height: 100px;
    background-color: antiquewhite;
    transform: rotateY(45deg);
}

需要注意的是，perspective在作为一个独立的css属性使用时，只能设置在父级，perspective和transform同时存在于一个元素内，并不会发生变化，不等于transform: perspective(1000px) rotateX(45deg);

视角位置 perspective-origin

视角的位置和背景图的定位一样，有那么几个相同的配置属性，对应着视角所在的位置，默认是center

.wrap {
    display: inline-block;
    perspective: 1000px;
    perspective-origin: center;
}

当然也可以设置px值，正值表示往右移动，负值表示往左移动。

.wrap {
    display: inline-block;
    perspective: 1000px;
    perspective-origin: 100px;
}

二维的3d

transform的3d默认是一个扁平的3d，正面可以看，但是反面是不行的，但是一个正常的3d，它的所有角度都是可视的，所以我们可能通过设置transform-style: preserve-3d;展示一个完整的3d视角。

假设我们这么设置：

.wrap {
    display: inline-block;
    perspective: 1000px;
    perspective-origin: center;
    transform: rotateY(90deg);
}

.box {
    width: 100px;
    height: 100px;
    background-color: antiquewhite;
    transform: rotateY(45deg);
}

虽然wrap元素自身的rotateY很难有正确的效果，但是它又确实是Y轴旋转了90度，而box又相对于父级，旋转了45度，那么按道理wrap看不到，box却可以看到一个背对我们的一个样式，但是实际是啥也看不到。

当我设置父级为一个完整3d展示的时候，就可以看到了，为什么设置父级，因为父级的transform影响的子元素。

.wrap {
    display: inline-block;
    perspective: 1000px;
    perspective-origin: center;
    transform: rotateY(90deg);
    transform-style: preserve-3d;
}

.box {
    width: 100px;
    height: 100px;
    background-color: antiquewhite;
    transform: rotateY(45deg);
}

此时box是倒转的，如果有更多的子元素，你可以发现设置z-index也会有镜像的那种感觉，层级越大越底层

隐藏旋转到背面的元素

上面我们可以看到，box元素基于父级90度旋转再自己旋转45度后，他其实是一个背对我们的样式，我们看到的是一个背面。

css有一个属性，可以控制背面的元素是否显示。

backface-visibility: visible;  /*默认值*/

当我们设置hidden时，背面状态的元素将不可见。

.wrap {
    display: inline-block;
    perspective: 1000px;
    perspective-origin: center;
    transform: rotateY(90deg);
    transform-style: preserve-3d;
}

.box {
    width: 100px;
    height: 100px;
    background-color: antiquewhite;
    transform: rotateY(45deg);
    backface-visibility: hidden;
}