A brief discussion on css 3d and spatial coordinate axes

Today I will tell you how to use this CSS 3D, as well as the related knowledge of spatial coordinate axes. Friends who are interested can come and find out, I hope it will be helpful to you.

　First the renderings:

　Basic idea: three-layer structure:Perspective Container>>Vector>>specific3dimage.

　Perspective container: Determines the 3D rendering effect. The pespective attribute here receives parameters in pixels. The larger the value of perspective, the more " The farther the eyes are from the observation object", the smaller the value, which means "The closer the eyes are to the observation object"

　Without the perspective attribute, it will not be possible Adjust the viewing angle.

## Carrier

： Supports carrying 3D images The biggest difference between this carrier and ordinary html tags is that it has an additional attribute: transform-style:preserve-3d

. Indicates that it supports 3D image display.

　If this attribute is missing, the 3D graphics that have been 3D converted will be pressed in a 2D plane and cannot show a 3D effect, because the containers are flat, even if the content It doesn't help that it's 3D.

　Specific 3d image

：Conversion from 2d to 3d　The 3d image here They are all converted from 2D plane images, so how to convert them. You need to use the translateX, translateY, translateZ attributes, of course the abbreviation is translate-3d, and rotateX, rotateY, rotateZ, etc. The specific rules of translate (translation) and rotate (rotation) are based on the famous reference picture below: the three-dimensional coordinate diagram.

First of all, let’s talk about the rules of translate. There is no need to say more about this. Just compare it and see it. For example, translateZ(-100px) is in this picture In the picture, it is equivalent to the image moving 100px in the direction of the -z axis. To put it more vividly, " is sunken 100px

towards the inside of the screen". translateX, translateY and so on.

The difficulty lies in rotate. Let me tell you a very simple judgment rule:

The forward axis is facing the eye, clockwise the rotation angle is positive, and counterclockwise the rotation The angle is negative.

　

Or you can use the left-hand rule: Stretch out your left hand, thumb pointing In the direction of the positive axis, the four fingers point to the positive direction of rotation, but be sure to remember that it is the left hand! ##　

Left-handed brother’s town: 　

It’s that simple. For example, now we want to make a 3D dice. First, the six floor plans are as shown above. As shown in the center of the three-dimensional coordinate system, their sizes are the same as the carrier. To turn it into a dice, the following transformation needs to be done:

　 (Note: The carrier and The length and width of the 6 faces are all 200px)

Attached are all source codes:

<template>
  <div>
    <section>
      <div>前面</div>
      <div>后面</div>
      <div>左面</div>
      <div>右面</div>
      <div>上面</div>
      <div>下面</div>
    </section>
  </div>
</template>

<style scoped>
.box {
  width: 100%;
  height: 100%;
  perspective: 500px;
}

.cube {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 100px auto;
  color: #ff92ff;
  font-size: 36px;
  font-weight: 100;
  text-align: center;
  line-height: 200px;
  transform-style: preserve-3d;
  transform: rotateX(-50deg) rotateY(-50deg) rotateZ(0deg);
  // animation: move 8s infinite linear;

  @keyframes move {
    0% {
      transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }
    100% {
      transform: rotateX(720deg) rotateY(360deg) rotateZ(360deg);
    }
  }

  div {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 10px solid #66daff;
    border-radius: 20px;
    background-color: rgba(51, 51, 51, 0.3);
  }

  .front {
    transform: translateZ(100px);
  }

  .back {
    transform: translateZ(-100px) rotateY(180deg);
  }

  .left {
    transform: translateX(-100px) rotateY(-90deg);
  }

  .right {
    transform: translateX(100px) rotateY(90deg);
  }

  .top {
    transform: translateY(-100px) rotateX(90deg);
  }

  .bottom {
    transform: translateY(100px) rotateX(-90deg);
  }
}
</style>

Hope this article is helpful to you.

The above is the detailed content of A brief discussion on css 3d and spatial coordinate axes. For more information, please follow other related articles on the PHP Chinese website!