css3怎么实现筛子的效果？?transform得常用属性？?

核心思路：
将六个平面正方形包裹在一个大的div盒子里面，通过定位将盒子都重叠起来，在设想一下正方体的一个立体感，那怎样就实现将六个正方性围城一个正方体？??
1.通过translate平移将五个正方行摆成十字型的样子，那就还有一个是底面的所以得让它向下平移正方形得宽度px(这个面比较特殊)
2.浮在上面得五个正方行中，围绕顶部正方形周围得四个正方形就需要通过
transform-origin设置围绕哪个边旋转，再通过transform: rotate(ndeg)来实现

• 小技巧
  其实在用平移得时候正负是一个坐标：eg:上正，下负，左负，右正
  那么旋转度数就和三角函数差不多咯：逆时针为负，顺时针为正
  你们有没有发现呢？

css代码
*{
            margin: 0;
            padding: 0;
        }
      
        .big{
            width: 200px;
            height: 200px;
            background-color: plum;
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            margin: auto;
            transform-style: preserve-3d;
        }
        .big:hover{
            transform: rotateY(360deg) rotateX(360deg);
            transition: all 3s;
        }
        div{
            width: 200px;
            height: 200px;
            position: absolute;
        }
        .inner:nth-of-type(1){
           background-color: skyblue;
          
        }
        .inner:nth-of-type(2){
             background-color: red;
            transform: translateX(-200px);
            transform: rotateY(-90deg);
            transform-origin: right;
        }
        .inner:nth-of-type(3){
            background-color: yellow;
            transform: translateX(200px);
            transform: rotateY(90deg);
           transform-origin: left;
        }
        .inner:nth-of-type(4){
             background-color: yellowgreen;
             transform: translateY(200px);
             transform: rotateX(-90deg);
             transform-origin: top;
        }
        .inner:nth-of-type(5){
            background-color: pink;
            transform: translateY(-200px);
            transform: rotateX(90deg);
            transform-origin: bottom;
        }
        .inner:nth-of-type(6){
            background-color: purple;
             transform: translateZ(-200px);
        }

 <div class="big">
        <div class="inner">1</div>
        <div class="inner">2</div>
        <div class="inner">3</div>
        <div class="inner">4</div>
        <div class="inner">5</div>
        <div class="inner">6</div>
    </div>

主要用到的知识栈：

tranform动画

在CSS3中，可以利用transform功能来实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形处理

• 一.旋转 rotate 用法：transform: rotate(45deg);

  共一个参数“角度”，单位deg为度的意思，正数为顺时针旋转，负数为逆时针旋转，上述代码作用是顺时针旋转45度。 四.移动

• 二.translate 用法：transform: translate(45px) 或者 transform: skew(45px,
  150px);
  参数表示移动距离，单位px，
  一个参数时：表示水平方向的移动距离； 两个参数时：第一个参数表示水平方向的移动距离，第二个参数表示垂直方向的移动距离。

• 三.基准点 transform-origin
  在使用transform方法进行文字或图像的变形时，是以元素的中心点为基准点进行的。使用transform-origin属性，可以改变变形的基准点。

  用法：transform-origin: 10px 10px;

  共两个参数，表示相对左上角原点的距离，单位px，第一个参数表示相对左上角原点水平方向的距离，第二个参数表示相对左上角原点垂直方向的距离；

  两个参数除了可以设置为具体的像素值，其中第一个参数可以指定为left、center、right，第二个参数可以指定为top、center、bottom。