Foreword transformations can move, scale, rotate, stretch, or stretch elements. We can use 2D and 3D to achieve the desired effect.

The 2 d transformation

methods

  • translate(x,y)———Move elements along the X and Y axes
  • scale(x,y)——-Change element width and height (x, y for magnification)
  • skew(x-angle,y-angle)——–It’s tilted along the X and Y axes
  • rotate(angle)——-Rotation (Angle in deg)

Note that translate, scale, skew, and rotate can be set in a single direction, and scale() is magnified by a certain ratio of width to height.

example

 <style>
    div{
      background-color: aquamarine;
      width: 100px;
      height: 100px;
      margin: 50px;
      float: left;
      font-size: 12px;
    }
    .box1{
      transform: translateY(100px);
    }
    .box2{
      transform: scale(1.5);
    }
    .box3{
      transform: rotate(90deg);
    }
    .box4{
      transform: skew(45deg);
    }
  </style>
<body>
  <div class="box">I am a box</div>
  <div class="box1">The box moves 100px along the Y-axis</div>
  <div class="box2">Box width and height, 1.5x magnification</div>
  <div class="box3">Rotate 90 degrees clockwise</div>
  <div class="box4">45 degrees in both the X and Y directions</div>
</body>
Copy the code

rendering

3 d conversion

methods

The usage is basically the same as 2D conversion

  • translateX()—– moves along the X-axis, or Y, or Z
  • Perspective: numpx—— effect of view (can be understood as an object viewed up close or from a distance)
  • rotateX(angle)——-3D rotation, X, Y, and Z optional
  • scaleX(x)— — — — — — — — scaling

Example (3D photo album)

 <style>
    body{
      background-color: rgb(142.167.158);
    }
    .pic-3d{
      width: 200px;
      height: 200px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%) rotateX(20deg) rotateY(20deg);
      /* View effect 3D */
      transform-style: preserve-3d;
      transition: transform 10s;
    }
    .pic-3d:hover{
      transform: translate(-50%, -50%) rotateX(360deg) rotateY(360deg);
    }
    .box{
      position: absolute;
      left: 0;
      top: 0;
      width: 200px;
      height: 200px;
      background-size: 200px;
      opacity: 0.9;
    }
    Before / * * /
    .pic-3d div:nth-child(1) {transform: translateZ(100px);
      background-image: url("./img/1.jpg");
    }
    /* 后 */
    .pic-3d div:nth-child(2) {transform: translateZ(-100px);
      background-image: url("./img/2.jpg");
    }
    / * * / left
    .pic-3d div:nth-child(3) {transform: translateX(-100px) rotateY(-90deg);
      background-image: url("./img/3.jpg");
    }
    / * * / right
    .pic-3d div:nth-child(4) {transform: translateX(100px) rotateY(90deg);
      background-image: url("./img/4.jpg");
    }
    /* 上 */
    .pic-3d div:nth-child(5) {transform: translateY(-100px) rotateX(90deg);
      background-image: url("./img/5.jpg");
    }
    /* 下 */
    .pic-3d div:nth-child(6) {transform: translateY(100px) rotateX(-90deg);
      background-image: url("./img/6.jpg");
    }
  </style>
 <div class="pic-3d">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
Copy the code

The effect