CSS3中transform:matrix3d平民理解

面对3d算法，对于没有数学基础，像类似我这样的普通人来说，无法理解，这是我对于这个样式的摸索与自己的理解，记录一下。大家有兴趣可以改动各参数看下效果，大家就知道是怎么回事了

/* 左右拉伸、Z轴值、0、Z指向（相对视角平面），左右倾斜度，上下拉伸度，0，Z指向（相对垂直面），0，0，1，0,横坐标偏移量，纵坐标偏移量，z坐标便宜量（0），缩放量（1为原值，超大越小）*/
transform:matrix3d(1, 0, 0, 0.002, -0.02, 0.9, 0, 0.0003, 0, 0, 1, 0, 65, 28, 3, 1.1);

.bz .certificate li img.depth3 
{
    /*transform:matrix(1,0,0,1,10,20);*/
    /*transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,10,20,30,1);*/
    /*matrix3d(0.86602, 0, -0.49999, 0, 0, 1, 0, 0, 0.49999, 0, 0.86602, 0, -235.819, 0, -63.05, 1);*/
    /*matrix3d(0.86602, 0, 0.49999, 0, 0, 1, 0, 0, -0.49999, 0, 0.86602, 0, 235.496, 0, -62.95, 1);*/
    /*transform:matrix3d(0.86602, 0, -0.49999, 0, 0, 1, 0, 0, 0.49999, 0, 0.86602, 0, 10, 20, -63.05, 1);*/
    /* 左右拉伸、Z轴值、0、Z指向（相对视角平面），左右倾斜度，上下拉伸度，0，Z指向（相对垂直面），0，0，1，0,横坐标偏移量，纵坐标偏移量，z坐标便宜量（0），缩放量（1为原值，超大越小）*/
    -webkit-transform:matrix3d(1, 0, 0, 0.002, -0.02, 0.9, 0, 0.0003, 0, 0, 1, 0, 65, 28, 3, 1.1);
    -ms-transform:matrix3d(1, 0, 0, 0.002, -0.02, 0.9, 0, 0.0003, 0, 0, 1, 0, 65, 28, 3, 1.1);
   transform:matrix3d(1, 0, 0, 0.002, -0.02, 0.9, 0, 0.0003, 0, 0, 1, 0, 65, 28, 3, 1.1); box-shadow: 10px 18px 40px #333;
    /*transform: matrix3d(0.86602, 0, -0.49999, 0, 0, 1, 0, 0, 0.49999, 0, 0.86602, 0, -235.819, 0, -63.05, 1);*/
    }
.bz .certificate li img.depth2
{
    transform:matrix3d(1, 0, 0, 0.002, -0.02, 0.9, 0, 0.0003, 0, 0, 1, 0,65, 28, 3, 1.2);
    -webkit-transform:matrix3d(1, 0, 0, 0.002, -0.02, 0.9, 0, 0.0003, 0, 0, 1, 0,65, 28, 3, 1.2);
    -ms-transform:matrix3d(1, 0, 0, 0.002, -0.02, 0.9, 0, 0.0003, 0, 0, 1, 0,65, 28, 3, 1.2);
    box-shadow: 10px 18px 40px #333;}
.bz .certificate li img.mdepth3
{
    transform:matrix3d(1, 0, 0, -0.002, 0.02, 0.9, 0, 0.0003, 0, 0, 1, 0, -65, 28, 3, 1.1);
     -webkit-transform:matrix3d(1, 0, 0, -0.002, 0.02, 0.9, 0, 0.0003, 0, 0, 1, 0, -65, 28, 3, 1.1);
     -ms-transform:matrix3d(1, 0, 0, -0.002, 0.02, 0.9, 0, 0.0003, 0, 0, 1, 0, -65, 28, 3, 1.1);
    box-shadow: 10px 18px 40px #333;}
.bz .certificate li img.mdepth2
{
    transform:matrix3d(1, 0, 0, -0.002, 0.02, 0.9, 0, 0.0003, 0, 0, 1, 0,-65, 28, 3, 1.2); 
    -webkit-transform:matrix3d(1, 0, 0, -0.002, 0.02, 0.9, 0, 0.0003, 0, 0, 1, 0,-65, 28, 3, 1.2);
    -ms-transform:matrix3d(1, 0, 0, -0.002, 0.02, 0.9, 0, 0.0003, 0, 0, 1, 0,-65, 28, 3, 1.2);
    box-shadow: 10px 18px 40px #333;}

<div class="certificate">
    <ul class="cer_con" style="position: relative;">
                <li><a href="javascript:void(0);"><img src="/uploadfiles/pictures/help/20190401110519_4583.jpg" alt="中国地坪行业品牌二十强(2)" style="display: block; left: 29.4px; top: -91.315px; visibility: visible; position: absolute; z-index: 2; opacity: 0.81; width: 259.2px; height: 342.63px;" class="depth2"></a></li>
                <li><a href="javascript:void(0);"><img src="/uploadfiles/pictures/help/20180404200038_5612.jpg" alt="中华人民共和国国家质量奖" style="display: block; left: 171px; top: -110.35px; visibility: visible; position: absolute; z-index: 3; opacity: 0.9; width: 288px; height: 380.7px;" class="depth3"></a></li>
                <li><a href="javascript:void(0);"><img src="/uploadfiles/pictures/help/20180404200025_8974.jpg" alt="中国建筑材料联合会十佳工程" style="display: block; left: 415px; top: -131.5px; visibility: visible; position: absolute; z-index: 4; opacity: 1; width: 320px; height: 423px;" class="depth4 carousel-center"></a></li>
                <li><a href="javascript:void(0);"><img src="/uploadfiles/pictures/help/20180404200010_2396.jpg" alt="中国地坪行业十佳工程" style="display: block; left: 691px; top: -110.35px; visibility: visible; position: absolute; z-index: 3; opacity: 0.9; width: 288px; height: 380.7px;" class="mdepth3"></a></li>
                <li><a href="javascript:void(0);"><img src="/uploadfiles/pictures/help/20190401110635_3856.jpg" alt="中国地坪行业品牌二十强" style="display: block; left: 861.4px; top: -91.315px; visibility: visible; position: absolute; z-index: 2; opacity: 0.81; width: 259.2px; height: 342.63px;" class="mdepth2"></a></li>
            </ul>
</div>

案例地址：http://www.hunterbj.com/join.html 结合3d平面滚动，成为3D立体滚动