Como o css3 consegue o efeito da peneira? ? Transform tem atributos comuns? ?

Ideia central:
embrulhe seis quadrados planos em uma grande caixa div, sobreponha as caixas posicionando-as e imagine uma sensação tridimensional de um cubo, então como obter um cubo rodeado por seis quadrados? ??
1. Transforme as cinco linhas quadradas em uma forma de cruz, então há outra no lado inferior, então deixe-a traduzir para baixo a largura quadrada px (este lado é mais especial)
2. Flutue no topo Entre as cinco linhas quadradas , os quatro quadrados ao redor do quadrado superior precisam ser
girados em torno de qual lado por meio de origem de transformação e, em seguida, por meio de transformação: girar (ndeg) para atingir

• Dicas
  Na verdade, ao usar a translação, o positivo e o negativo são uma coordenada: por exemplo: positivo para cima, negativo para baixo, negativo para a esquerda, positivo para a direita,
  então o grau de rotação é quase o mesmo que a função trigonométrica: no sentido anti-horário é negativo, no sentido horário é positivo,
  você percebeu o quê?

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>

Pilha de conhecimento usada principalmente:

animação de transformação

No CSS3, você pode usar a função de transformação para implementar quatro tipos de processamento de deformação: rotação, dimensionamento, inclinação e movimento de texto ou imagens

• 1. Rotate rotate Usage: transform: rotate (45deg);

  Há um parâmetro "ângulo". A unidade deg significa graus. Um número positivo significa rotação no sentido horário e um número negativo significa rotação no sentido anti-horário. O código acima é usado para girar 45 graus no sentido horário. Quatro. Celular

• 2. Traduzir Uso: transform: translate (45px) or transform: skew (45px,
  150px); o
  parâmetro representa a distância móvel, a unidade é px,
  quando um parâmetro: representa a distância móvel na direção horizontal; quando dois parâmetros: o primeiro parâmetro representa a distância de movimento na direção horizontal, o segundo parâmetro indica a distância de movimento na direção vertical.

• 3. Origem da transformação do ponto de referência
  Ao usar o método de transformação para transformar texto ou imagens, o ponto central do elemento é usado como ponto de referência. Usando o atributo transform-origin, você pode alterar o ponto de referência da deformação.

  用法 ： origem da transformação: 10px 10px;

  Existem dois parâmetros, representando a distância da origem do canto superior esquerdo, em px, o primeiro parâmetro representa a distância da origem do canto superior esquerdo na direção horizontal, e o segundo parâmetro representa a distância da origem de o canto superior esquerdo na direção vertical;

  Além dos dois parâmetros podem ser definidos para valores de pixel específicos, o primeiro parâmetro pode ser especificado como esquerdo, centro e direito, e o segundo parâmetro pode ser especificado como superior, central e inferior.