First, understand 3D transformation

  1. The characteristics of the 3 d

    • Depending almost small
    • Object and face occlusion are not visible

  2. Three dimensional coordinate system

    • X-axis: Horizontal right – Note: the right side of the X-axis is positive and the left side is negative

    • Y-axis: Straight down – note: the Y-axis is positive below and negative above

    • Z-axis: vertical to the screen – note: positive on the outside, negative on the inside

Second, 3D conversion

  1. 3D transformation knowledge points

    • 3DDisplacement:translate3d(x, y, z)
    • 3DRotation:rotate3d(x, y, z)
    • Perspective:perspctive
    • 3Dpresenttransfrom-style

  2. 3 d mobile translate3d

    • 3DTo move is to move2DWe added one more direction that we can move, the z direction
    • transform: translateX(100px): just moving along the x axis
    • transform: translateY(100px): just moving along the y axis
    • transform: translateZ(100px): just moving along the z axis
    • transform: translate3d(x, y, z)Where x, y, and z indicate the distance of the axis to be moved
    • Note: the corresponding values of x, y and z can not be omitted, and do not need to be filled with 0

  3. grammar

     transform: translate3d(x, y, z)
Copy the code

  4. Code demo

    transform: translate3d(100px.100px.100px/* Note: the corresponding values of x, y and z can not be omitted and do not need to be filled in0Fill */ transform:translate3d(100px.100px.0)
Copy the code

Third, perspective

  1. Knowledge point explanation

    • If you want web pages to be generated3DThe effect needs perspective3DObject projective2DThe plane)
    • Actually mimicking the human visual position can be seen as arranging the eye to see all the time
    • Perspective, also known as line-of-sight, is the distance from a person’s eyes to the screen
    • The closer to the visual point, the bigger the image in the computer plane, and the farther away, the smaller the image
    • The units of perspective are pixels

  2. Knowledge points

    • Perspective needs to be written above the parent box of the element being inspected

    • Notice the image below

      • D: Line-of-sight. Line-of-sight is the distance from a person’s eyes to the screen

      • Z: Is the Z-axis, the larger the z-axis (positive), the larger the object we see

  1. Code demo

    body {
  perspective: 1000px;
}
Copy the code

Fourth, the translateZ

  1. translateZ 与 perspecitveThe difference between
    • perspecitveTo set the parent,translateZSet different sizes for child elements

3D rotateX

3D rotation allows an element to be rotated along the x, y, z or custom axes in a three-dimensional plane

  1. grammar

    • transform: rotateX(45deg)— Rotate 45 degrees in the positive x direction
    • transform: rotateY(45deg)— Rotate 45 degrees in the positive y direction
    • transform: rotateZ(45deg)— Rotate 45 degrees in the positive z direction
    • transform: rotate3d(x, y, z, 45deg)— Rotate 45 deg as an Angle along the custom axis

  2. Code case

    div {
  perspective: 300px;
}

img {
  display: block;
  margin: 100px auto;
  transition: all 1s;
}

img:hover {
  transform: rotateX(-45deg)}Copy the code

  3. The left hand rule

    • The thumb of your left hand points in the positive direction of the x axis

    • The rest of the fingers bend in the direction that the element rotates along the X-axis

6. 3D rotateY

  1. Code demo

    div {
  perspective: 500px;
}

img {
  display: block;
  margin: 100px auto;
  transition: all 1s;
}

img:hover {
  transform: rotateY(180deg)}Copy the code

  2. The left hand rule

    • The thumb of the left hand points in the positive y-direction

    • The rest of the finger curve is the direction in which the element rotates along the y axis (positive)

3D rotateZ

  1. Code demo

    div {
  perspective: 500px;
}

img {
  display: block;
  margin: 100px auto;
  transition: all 1s;
}

img:hover {
  transform: rotateZ(180deg)}Copy the code

  2. rotate3d

    • transform: rotate3d(x, y, z, deg)Rotate deG as an Angle along the custom axis
    • X, y, and z are vectors for the axis of rotation, indicating whether you want to rotate along that axis, and the last one indicating the Angle of rotation
      • transform: rotate3d(1, 1, 0, 180deg)— rotate 45deg diagonally
      • transform: rotate3d(1, 0, 0, 180deg)— rotate 45deg along the X-axis

  3. Code demo

    div {
  perspective: 500px;
}

img {
  display: block;
  margin: 100px auto;
  transition: all 1s;
}

img:hover {
  transform: rotate3d(1.1.0.180deg)}Copy the code

    8, 3D rendering transform-style

    1. transform-style

      • Being fostered fostered fostered fostered

      • Controls whether a child element opens a three-dimensional environment

      • Transform-style: Flat means child element does not open 3D space, default

      • Transform-style: Preserve-3D child element unlocks the 3d space

      • The code is written to the parent, but affects the child box

    2. Code demo

<style>
        body {
            perspective: 500px;
        }
        
        .box {
            position: relative;
            width: 200px;
            height: 200px;
            margin: 100px auto;
            transition: all 2s;
            /* Keep the child elements in 3d space */
            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);
        }
    </style>
</head>

<body>
    <div class="box">
        <div></div>
        <div></div>
    </div>
</body>
Copy the code