What C3 conversion can still play like this? ? ? Use CSS3 to achieve 2D conversion, 3D conversion, 3D rendering, detailed summary and case demonstration.

Detailed explanation of various conversions in C3

table of Contents

Conversion
2D conversion
- mobile
- Spin
  - The center point of 2D conversion
- Zoom
Compound writing of 2D conversion
3D conversion
- mobile
  - perspective
- Spin
3D rendering

Transform

Transform is one of the subversive features in CSS3, which can realize the effects of displacement, rotation, and scaling of elements. Transitions are usually used in conjunction with transitions , which are more continuous and enjoyable.
Attributes:
1. Move: translate
2. Rotate: rotate
3. Scale: scale
classification:
1. 2D conversion
2. 3D conversion

2D conversion

2D conversion of mobile
Rotation of 2D conversion
- Set conversion center point
2D conversion zoom

1. The movement of 2D conversion (translate)

Movement in 2D transformation is similar to positioning, it can change the position of elements on the page.
The biggest advantage of translate is that it does not affect the position of other elements. If the parameter in translate is written as a percentage, it moves relative to its own element.

grammar:

  transform: translateX(n); 在X轴上移动的距离。
  transform: translateY(n); 在Y轴上移动的距离。
  也可以合起来写。
  transform: translate(X,Y);
  transform: translate(50%,50%); 在X轴和Y轴上移动自身宽度和高度的50%

The following code gives two divs with a width of 200 pixels and adds movement to the first div. The X axis moves 30 pixels, and the Y axis moves 30 pixels.

  没有添加移动属性
  <style>
  div {
      width: 200px;
      height: 200px;
      background-color: pink;

  }

  div:last-child {
      background-color: purple;
  }
  </style>

  <div></div>
  <div></div>

Insert picture description here

<style>
    div {
        width: 200px;
        height: 200px;
        background-color: pink;

    }

	div:last-child {
        background-color: purple;
    }
	添加移动属性
	div:first-child {
        transform: translate(30px, 30px);
    }
</style>

<div></div>
<div></div>

Insert picture description here

2. Rotation of 2D conversion (rotate)

2D rotation refers to rotating the element clockwise or counterclockwise in a 2-dimensional plane.
grammar:
```
  transform: rotate(旋转度数);
```
Note:
1. Write the degree of rotation in rotate, the unit is deg (degree), for example rotate(90deg);
2. When the rotation angle is positive, the rotation direction is clockwise; when the rotation angle is negative, the rotation direction is counterclockwise.
3. The default rotation center point is the center point of the element

The effect of the following code is: when the mouse hovers over the picture, the picture will rotate 360° clockwise. In order to have more animation effects, a transition effect is added.

  <style>
  img {
      width: 200px;
      height: 200px;
      border-radius: 50%;
      border: 5px solid #ccc;
      /* 过渡 */
      transition: all 0.3s;
  }
  /* 顺时针旋转360° */
  img:hover {
      transform: rotate(360deg);
  }
  </style>
  
  <img src="../1613787740511.jpg" alt="">

Insert picture description here

The center point of 2D transformation (transform-origin)

grammar:
```
 transform-origin: x y;
```
Parameters can be percentages, pixels, or orientation nouns
The center point of the default conversion of xy is the center point of the element (50% 50%)
You can set pixels or position nouns for xy (top bottom left right center)

3. Scale of 2D conversion

Zoom, as the name suggests, can zoom in and out. As long as you add this attribute to the element, you can control whether it zooms in or out.

grammar:

  transform: scale(x,y);
  其中x y 表示缩放倍数

  transform:scale(1,1)︰宽和高都放大一倍，相对于没有放大
  transform:scale(2,2)∶宽和高都放大了2倍
  transform:scale(2)∶只写一个参数，第二个参数则和第一个参数一样，相当于scale(2,2)
  transform:scale(0.5,0.5):缩小

The characteristics of sacle zoom: You can set the conversion center point zoom, the default zoom is based on the center point, and it does not affect other boxes.

Compound writing of 2D conversion

If multiple conversions are involved at the same time, they can be combined to write.

grammar:

  transform: translate() rotate() scale();

The order of conversion will affect the effect of the conversion, for example: first rotation will change the direction of the coordinate axis.
When we have displacement and other attributes at the same time, we must put the displacement to the front , otherwise there will be unexpected situations.

3D conversion

3D conversion of mobile (translate3d)

3D movement adds a movable direction to the 2D movement, which is the z-axis direction.

grammar:

  translform:translateX(100px); 在x轴上移动移动100px
  translform:translateY(100px); 在Y轴上移动100px
  translform:translateZ(100px); 在Z轴上移动100px
  当然也可以复合来写：
  transform:translate3d(x,y,Z); 其中x、y、z分别指在x y z 轴上移动的距离

The following code is to set the 3D movement when the mouse moves to the div.

  div {
      width: 100px;
      height: 100px;
      background-color: #c0ffc6;
      transition: all .5s;
  }
  div:hover {
      transform: translate3d(400px, 100px, 100px);
  }

  <div></div>

The effect is as follows:
Insert picture description here

Someone may ask, what is the difference between this and 2d mobile? Of course, this example does not really show the 3D perspective at all,? ? ? What, the blogger is deceiving? ? ? Of course not, you think, we all have an intuitive feeling in the 3d world that is near, far, and small , so since we are moving in 3d, we must have this feeling. Therefore, we have introduced a concept called perspective- perspective .

Perspective

Its function is to produce near-large and far-small vision on a 2D plane. But this near-large and far-small effect is two-dimensional.
Note:
1. If you want to produce a 3D effect on a web page, you need perspective (understood as a 3D object projected in a 2D plane).
2. Perspective is also called visual distance: visual distance is the distance between human eyes and the screen
3. The unit of perspective is pixels
4. Perspective written on the parent box of the observed element

Still the above example, I now add perspective to the parent element of the div, because my body only has a div, so the parent element of the div is the body, so I add perspective to the body.

  body {
  	/* 透视，像素大小自己把握 */
      perspective: 200px;
  }
  div {
      width: 100px;
      height: 100px;
      background-color: #c0ffc6;
      transition: all .5s;
  }
  div:hover {
      transform: translate3d(400px, 100px, 100px);
  }

  <div></div>

The effect is as follows:
Insert picture description here

Rotation of 3D conversion (rotate3d)

3D rotation means that the element can be rotated along the x-axis, y-axis, z-axis or a custom axis in a three-dimensional plane.

grammar:

  transform:rotateX(90deg); 沿着x轴正方向旋转90° 
  transform:rotateY(90deg);  沿着y轴正方向旋转90°   
  transform:rotateZ(90deg);  沿着Z轴正方向旋转90°   顺时针

After talking for so long, how do you distinguish the positive direction?
- Note: In our computer, the upper left corner of the computer screen is the coordinate origin, the horizontal to the right is the positive direction of the X axis, the vertical downward to the X axis is the positive direction of the Y axis, and the outside perpendicular to the screen is the positive direction of the Z axis.
```
  左手法则：张开左手，让大拇指指向坐标轴的正方向，四指弯曲的方向为正方向。例如：顺时针方向为Z轴的正方向
```
Of course, 3D rotation can also be compounded to write:

  transform:rotate3d(x,y,z,90deg); 沿着自定义轴旋转90deg
  transform: rotate3d(1, 0, 0, 90deg); 在X轴方向旋转90°
  transform: rotate3d(0, 1, 0, 90deg); 在y轴方向旋转90°
  transform: rotate3d(1, 1, 0, 90deg); 在X轴和y轴正方向的角平分线方向旋转90°
  这里涉及矢量的合成，因为在X轴和Y轴上要同时旋转，X轴和Y轴矢量合成后为X轴和y轴正方向的角平分线。

Case: The box rotates 45° along the positive direction of the X axis

  body {
      perspective: 300px;
  }
  
  div {
      width: 200px;
      height: 200px;
      margin: 100px auto;
      background-color: #3be840;
      transition: all 1s;
  }
  
  div:hover {
      transform: rotateX(45deg);
  }

  <div></div>

Insert picture description here

[3D rendering (transfrom-style)]

Sometimes when we use multiple objects to rotate, we find a strange phenomenon. The rotation is clearly set, but when rotating, the rotation attribute of the child element disappears and does not work. This should be because we did not set the 3D rendering ( transfrom-style), and the default setting of this attribute is flat, which means it is not turned on, so we must explicitly set the parent element to enable the child element to open the three-dimensional environment.

grammar:

  transform-style: flat; 子元素默认不开启3d立体空间
  transform-style: preserve-3d; 子元素开启立体空间

Note: This attribute is set to the parent element, but it affects the child element.

Example:

  body {
      perspective: 500px;
  }
  
  .box {
      position: relative;
      width: 200px;
      height: 200px;
      margin: 100px auto;
      transition: all 1s;
  }
  
  .box:hover {
      transform: rotateY(60deg);
  }
  
  .box div {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: pink;
  }
  
  .box div:last-child {
      background-color: purple;
      transform: rotateX(60deg);
  }


  <div class="box">
      <div></div>
      <div></div>
  </div>

The above code does not set 3D rendering for .box. The effect is as follows:
Insert picture description here

body {
    perspective: 500px;
}
    
.box {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 100px auto;
    transition: all 1s;
    /* 让子元素保持3d立体空间环境 必须是直接父元素加，间接父元素加上不生效 */
    transform-style: preserve-3d;
}
    
.box:hover {
    transform: rotateY(60deg);
}
    
.box div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: pink;
}
    
.box div:last-child {
    background-color: purple;
    transform: rotateX(60deg);
}


<div class="box">
    <div></div>
    <div></div>
</div>

Add 3D rendering effect as follows:
Insert picture description here