Set the stage

.<style type="text/css">
      .main{
        width: 900px;
        min-height: 100px;
        margin:0 auto;
        padding: 100px 50px;
        background-color: #f0f0f0;
        box-shadow: inset 0 0 3px rgba(0.0.0.35);

        position: relative;
        top: 0;

        display: flex;
        justify-content: center;
      }

      .container{
        width: 128px;
        height: 100px;

        position: relative;
      }

      .inner{
        width: 128px;
        height: 100px;
        box-shadow: 0 1px 3px rgba(0.0.0.5);

        position: absolute;
        bottom: 0;
      }

      .inner:nth-child(1) { transform: rotateY(   0deg );background-color: #ccffff; }
      .inner:nth-child(2) { transform: rotateY(  40deg );background-color: #ccccff; }
      .inner:nth-child(3) { transform: rotateY(  80deg );background-color: #99ffff; }
      .inner:nth-child(4) { transform: rotateY( 120deg );background-color: #99ffcc; }
      .inner:nth-child(5) { transform: rotateY( 160deg );background-color: #ffccff; }
      .inner:nth-child(6) { transform: rotateY( 200deg );background-color: #ffcccc; }
      .inner:nth-child(7) { transform: rotateY( 240deg );background-color: #ffffcc; }
      .inner:nth-child(8) { transform: rotateY( 280deg );background-color: #ccff00; }
      .inner:nth-child(9) { transform: rotateY( 320deg );background-color: #99ff00; }
   </style>.<! -- -- -- > stage
    <div class="main">
      <! -- -- -- > container
      <div id="container" class="container">
        <div class="inner"></div>
        <div class="inner"></div>
        <div class="inner"></div>
        <div class="inner"></div>
        <div class="inner"></div>
        <div class="inner"></div>
        <div class="inner"></div>
        <div class="inner"></div>
        <div class="inner"></div>
      </div>
    </div>.Copy the code

rendering

  • We set the block to each other by pressingYIf I rotate it, all I see is that the square gets smaller, and I don’t pressYRotation. This is because we are still in 2D view and have no perspective.

Adding Perspective properties

  1. The perspective propertiesSpecifies the observer andz = 0The distance of the plane gives perspective to an element with a three-dimensional position transformation.
  2. The perspective propertiesOnly 3D conversion elements are affected.
  3. The perspective point is in front of the browser, soThe perspective propertiesAfter the value is set, the element will be larger or smaller.
  4. By default, the vanishing point is at the center of the element (viewpoint), but you can change its position by setting the Perspective-Origin property.
. .main{ ... -webkit-perspective: 800px; -moz-perspective: 800px; perspective: 800px; }...Copy the code

rendering

  • And now you can see the rotation of the block.
  • You can see the other squares being obscured by the last square. That’s because the cube is rotating in 2D space.

Add the transformstyle attribute

  1. The transform-style property sets whether the element’s children reside in 3D space or in a plane.
  2. valueflat | preserve-3d.flatThe children of an element are in the plane of that element,preserve-3dThe children of the element should be in 3D space.
. .container{ ... -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; }...Copy the code

rendering

  • So this is what we want, and all the squares are rotated by the y axis.
  • But now it’s all crowded together. Then useThe transform propertiesSpread out the cubes.

Add the translateZ() function

  1. Modify the elementThe z axisIn three dimensions.
. .inner:nth-child(1) { transform: rotateY( 0deg ) translateZ(200px); background-color: #ccffff; } .inner:nth-child(2) { transform: rotateY( 40deg ) translateZ(200px); background-color: #ccccff; } .inner:nth-child(3) { transform: rotateY( 80deg ) translateZ(200px); background-color: #99ffff; } .inner:nth-child(4) { transform: rotateY( 120deg ) translateZ(200px); background-color: #99ffcc; } .inner:nth-child(5) { transform: rotateY( 160deg ) translateZ(200px); background-color: #ffccff; } .inner:nth-child(6) { transform: rotateY( 200deg ) translateZ(200px); background-color: #ffcccc; } .inner:nth-child(7) { transform: rotateY( 240deg ) translateZ(200px); background-color: #ffffcc; } .inner:nth-child(8) { transform: rotateY( 280deg ) translateZ(200px); background-color: #ccff00; } .inner:nth-child(9) { transform: rotateY( 320deg ) translateZ(200px); background-color: #99ff00; }...Copy the code

rendering

  • A simple static effect is created

Add interaction

. .container{ ... /* -webkit-transition: -webkit-transform 1s; -moz-transition: -moz-transform 1s; transition: transform 1s; }...<body>.<script type="text/javascript">
      var container = document.getElementById("container");
      var deg = 0;
      container.onclick = function(e){
        deg = deg + 40;
        container.style.transform = `rotateY(${deg}deg)`;
      }
    </script>
  </body>.Copy the code
  • You can choose to rotate the container or change the rotation of each square. This is a directly rotating container.
  • We’re adding 40 every time because by default we’re rotating each square 40 degrees more.
  • You also need a transition effect to addThe transition properties, the CSS automatically implements each frame animation.

rendering