translateZ

星期一 CSS3 实现 loading... 最后由 HappyJanice 于2017年10月23日回复

  • 1 回答
  • 1.1k 浏览

我想知道translateZ这个属性的值从50到0的作用

因为我尝试去掉属性之后是能看出效果来的,但是却不知道这个属性是怎么影响这个效果的,单独对translateZ属性进行测试是放大缩小的效果,联系不到一块去?

求老师解答。

  • HappyJanice 2017年10月23日 回答 #1楼
  • 在2D平面的效果看来,单独使用会觉得tanslateZ为缩放功能,但其实它是在3D效果下发挥这控制Z轴位置的作用。

    因此,为了凸显解释你的问题,特意写了如下3D效果的代码。你只要将此段代码在body部分执行,变换一下translateZ的值,就会更加深刻理解了。

    <style>

    *{margin: 0; padding: 0;}

    .father{width: 200px; height: 200px;

        border: 1px solid #000;

        margin: 100px auto;

        perspective: 1000px; /*为了突出问题,夸大效果,此为3D效果的景深*/

    }

    .son{width: 100%; height: 100%; 

        background: orange;

        font-size: 16px;

        color:red;  

    text-align: center;

     -webkit-transform:  rotateY(55deg) translateZ(150px) ;  //变动该值, translateZ(150px)

    }

    </style>

        <div class="father">

            <div class="son">translateZ</div>

        </div>  

  • 0 评论