CSS入坑之三

关于css 3d

rotateX rotateY rotateZ 都是3d方面的属性，rotateX表示元素以X轴为旋转轴来旋转。（轴从左往右插入元素默认中心），rotateY表示以Y轴为轴来旋转。rotateZ表示以z轴为轴来旋转（又屏幕往里插入元素默认中心）。屏幕是x轴和Y轴构成的二维平面，通常情况下，我们的能看到的都只能在这个平面，所以，当一个矩形rotateX（45deg）的时候，它上部分低于屏幕平面，下部分高于屏幕平面，从而我们看到的只是它旋转后在屏幕平面的投影，这个“压缩”后的面积可以通过勾股定理算出来(实际上还要结合视锥来算，近大远小)。

perspective 透视点（视点），大概含义就是镜头的到屏幕屏幕的距离。有说法是他的默认距离是2000px .通过perspective可以调整这个默认距离，如果一正方形边长200px，rotateX(45deg),perspective设置为200/根号2 ，那么正方形的底边刚好接触到“视点平面”,视点平面可以认为是设置了perspective了的父元素。

 .box {
     margin: 0 auto;
        height: 200px;
        width: 200px;
        overflow: hidden;
        perspective: 1410px;
        .box-a {
          text-align: center;
          transform: rotateX(45deg) translateZ(0px);
          float: left;
          height: 200px;
          width: 200px;
          background-size: 100% 100%;
          background-image: url("image/Bantou.jpg");
          h1 {
            position: absolute;
            width: 100px;
            left: ~'calc(50% - 50px)';
            bottom: 0px;
            padding: 0;
            color: #3bf0f3;
          }
        }
        .box-b {
          height: 200px;
          width: 200px;
          background-color: @blue-500;

        }

translateX 改变元素每个点的X坐标，同理translateZ改变元素Z坐标的“深浅”，使元素远离本来的屏幕平面，正就是凸出来，负值就是塌下去，近大远小。如果translateZ的值超过perspective的值，就是跑到视点后面了，这就元素就显示不到了