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的值,就是跑到视点后面了,这就元素就显示不到了

你可能感兴趣的:(CSS入坑之三)