css3はどのようにしてふるいの効果を達成しますか？？変換には共通の属性がありますか？？

コアアイデア：
6つの平らな正方形を大きなdivボックスに包み、配置してボックスを重ね、立方体の3次元感覚を想像してから、6つの正方形に囲まれた立方体を実現するにはどうすればよいですか？??
1. 5つの正方形の行を十字形に変換し、次に下側にもう1つあるので、正方形の幅pxを下に変換します（この側はより特別です）
2。5つの正方形の行の中で上に浮きます、上の正方形の周りの4つの正方形は、
transform-originを介して、次にtransform：rotate（ndeg）を介して、どちらの側を中心に回転する必要があります。

ヒント
実際、平行移動を使用する場合、正と負は座標です。例：正の上、負の下、負の左、正の右、
回転の程度は三角関数とほぼ同じです。反時計回りは負、時計回りはポジティブ、
あなたは何に気づきましたか？

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>

主に使用されるナレッジスタック：

変換アニメーション

CSS3では、変換関数を使用して、テキストまたは画像の回転、スケーリング、傾斜、および移動の4種類の変形処理を実装できます。

1.回転回転使用法：変換：rotate（45deg）;

パラメータ「角度」があります。単位degは度を意味します。正の数は時計回りの回転を意味し、負の数は反時計回りの回転を意味します。上記のコードは時計回りに45度回転するために使用されます。Four。モバイル
2.変換使用法：transform：translate（45px）またはtransform：skew（45px、
150px）;
パラメーターは移動距離を表し、単位はpxです
。1つのパラメーターの場合：水平方向の移動距離を表します。2つのパラメーターの場合：最初のパラメータは水平方向の移動距離を表し、2番目のパラメータは垂直方向の移動距離を示します。
3.参照点transform-origin
変換方法を使用してテキストまたは画像を変換する場合、要素の中心点が参照点として使用されます。transform-origin属性を使用して、変形の参照点を変更できます。

用法：変換原点：10px 10px;

左上隅の原点からの距離をpxで表す2つのパラメーターがあり、最初のパラメーターは左上隅の原点から水平方向の距離を表し、2番目のパラメーターはの原点からの距離を表します。垂直方向の左上隅。

2つのパラメーターを特定のピクセル値に設定できることに加えて、最初のパラメーターは左、中央、および右として指定でき、2番目のパラメーターは上、中央、および下として指定できます。

css3はどのようにしてふるいの効果を達成しますか？？変換には共通の属性がありますか？？

おすすめ