[Distal] 3D deformation (CSS) transform

3D deformation (CSS) transform

2d x y

3d x y z

CSS3 in a 3D coordinate system with the 3D coordinate system is above a certain difference, which corresponds to about the X axis is rotated 180 degrees, as in FIG.

Simple to remember their coordinates:

x is negative on the left, the right is positive

y The above is negative, the following is positive

z is negative inside, the outside is positive

rotateX()

X is rotated in the perspective.

img {
  transition:all 0.5s ease 0s;
}
img:hove {

  transform:rotateX(180deg);
}

rotateY()

Along the y axis is rotated

img {
  transition:all 0.5s ease 0s;
}
img:hove {

  transform:rotateX(180deg);
}

rotateZ()

Rotate along the z axis

img {
  transition:all .25s ease-in 0s;
}
img:hover {
  /* transform:rotateX(180deg); */
  /* transform:rotateY(180deg); */
  /* transform:rotateZ(180deg); */
  /* transform:rotateX(45deg) rotateY(180deg) rotateZ(90deg) skew(0,10deg); */
}

Perspective (Perspective)

2D is a flat computer screen, the reason why an image having stereoscopic (3D effect), is only a visual presentation, this object may be achieved by a perspective view.

2D plane may be a perspective view, in the process of conversion, rendering 3D effect.

• Perspective Principle: near the far smaller.
• Browser perspective: the near the far smaller all the images on the screen perspective.
• perspective: horizon, it represents the length from the point of view of the screen. Viewpoint, when used to simulate the effects of perspective eye position

Note: the perspective effect is not required in any case, be set according to needs of the development.

As a general perspective attribute set to the parent element, the child element acting in all 3D conversion

translateX(x)

Only horizontal movement direction ** (X axis)

The main purpose of the effect for mobile

translateY(y)

Move only in the vertical direction (Y axis movement)

translateZ (z)

Visual manifestation transformZ is the size of the change, in essence, the XY plane relative to the distance change in viewpoint (near and far will certainly say what comes from far or near reference, where reference is perspective property). For example, to set the perspective 200px; then the next transformZ value of close to 200, that is, the closer, looks greater, more than 200 will not see, because the equivalent went to the back of the head, I believe you normally , you can not see his back of the head.

translate3d(x,y,z)

[Note] where, x and y may be a length value, or as a percentage, is the percentage of height and width and the vertical direction relative to the horizontal direction to its own element; length value can only be set Z

Open case

body {
}
.door {
  width: 300px;
  height: 300px;
  margin: 100px auto;
  border: 1px solid gray;
  perspective: 1000px;
  background: url('images/dog.gif') no-repeat cover;
  position: relative;
}
.door > div {
  box-sizing: border-box;
  border: 1px solid black;
}
.left {
  float: left;
  width: 50%;
  height: 100%;
  background-color: brown;
  transform-origin: left center;
  transition: 1s;
  position: relative;
}
.left::before {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  top: 50%;
  right: 0px;
  transform: translateY(-10px);
  border: 1px solid whitesmoke;
}
.right {
  width: 50%;
  height: 100%;
  float: left;
  background-color: brown;
  transform-origin: right center;
  transition: 1s;
  position: relative;
}
.right::before {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  top: 50%;
  left: 0px;
  transform: translateY(-10px);
  border: 1px solid whitesmoke;
}
.door:hover .left {
  transform: rotateY(-130deg);
}
.door:hover .right {
  transform: rotateY(130deg);
}

backface-visibility

backface-visibility attribute defines whether the element is visible when the screen is not oriented.

Flip Box Case

div {
            width: 224px;
            height: 224px;
            margin: 100px auto;
            position: relative;
        }
        div img {
            position: absolute;
            top: 0;
            left: 0;
            transition: all 1s; 
        }
        div img:first-child {
            z-index: 1;
            backface-visibility: hidden; /* 不是正面对象屏幕，就隐藏 */
        }
        div:hover img {
            transform: rotateY(180deg);
}