* {
    margin: 0;
    padding: 0;
}
body {
    perspective: 1000px;
}
#box {
    width: 400px;
    height: 400px;
    border: 1px solid #000;
    /* background: #f00; */
    margin: 100px auto;
    transform-style: preserve-3d;
    transform:perspective(1000px) ;
    /* transform-origin:top left ;
    transform: rotateX(45deg); */
}

#box1 {
    width: 200px;
    height: 200px;
    background: #ff0;
    /* transform: scale3d(2,2,2); */
    /* transform: rotateZ(45deg) scaleZ(2); */
    /* transform: scaleZ(0); */
    /* transform: rotate3d(0.4,0.4,1,100deg); */
    transform: translate3d(100px,100px,-100px);
    /* transform: translateZ(-150px); */
    /* 
        transform 3d
            1.translateZ 近大远小
            translate3d()括号中必须有3个参数：加快CPU的运行
            2.rotateZ() 单位deg
            rotate3d(x,y,z,角度)
            3.scaleZ() 缩放z轴比例 取值:0 到 1
            scale3d(x,y,z)
    */
}