# 3D space conversion (displacement, rotation, stereo rendering)

Attribute: transform. The z-axis is perpendicular to the screen. The positive direction points to the user and the negative direction points to the inside of the screen.

## Spatial displacement:

Compound syntax: transform:translate3d(x,y,z);

Separate syntax: Transform: translatex (value); Transform: translatey (value); Transform: translatez (value);

x. The change on the y-axis is no different from the 2d displacement. The movement on the z-axis needs to add perspective: pixel unit value to the parent; Achieve perspective effect.

perspective Common values range from 800-1200 between. It means sight distance, and its function is to When space is converted, add The visual effect of near big far small, near real far virtual.

Example:

For two pink and blue squares of the same size, if you don't add perspective, you can't see the change after hover, but in fact box2 moves to the z axis. After hover, box2 and box1 are not at the same level, and there is a gradient between them. The positive effect is that box2 is larger than box1, because box2 is closer to the user.

```<style>
.box{
margin:100px auto;
width: 700px;
perspective: 1100px;
}
.box1 {
width: 200px;
height: 200px;
margin:0 30px;
float: left;
background-color: pink;
}
.box2 {
width: 200px;
height: 200px;
margin:0 30px;
float: left;
background-color: rgb(116, 211, 248);
}

.box2:hover {
transform: translateZ(100px);
}
</style>
<body>
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>```

## Space rotation:

Compound syntax: transform:rotate3d(x,y,z, angle degree);

x. The values of y and z are 0-1. Compound syntax is used to set the position and rotation angle of user-defined rotation axis, which is rarely used.

Separate syntax: transform:rotateX();transform:rotateY();transform:rotateZ();

Rotate around the axis.

Example:

The following pictures are the original picture, the effect of 45 degrees around the x-axis without perspective, and the effect of 45 degrees around the positive direction of the x-axis, y-axis and z-axis after adding perspective 1000px.

```<style>
.box {
width: 300px;
margin: 100px auto;
border: 2px solid #000;
perspective: 1000px;
}

img {
width: 300px;
transition: all 2s;
}

.box img:hover {
/* transform: rotateX(45deg); */
/* transform: rotateY(45deg); */
transform: rotateZ(45deg);
}
</style>
<body>
<div class="box">
<img src="./images/hero.jpeg" alt="">
</div>
</body>```

Judge the rotation direction:

Left hand rule: hold the rotation axis with your left hand, point your thumb to the positive direction, and the bending direction of your finger is the positive direction of rotation.

## Stereoscopic rendering:

perspective can only present the visual effects of near large and far small, near real and far virtual, so that the z-axis displacement can see the change, but it can not present the effects of three-dimensional graphics, such as turning over.

Therefore, you need to add transform style: preserve-3d to the parent; Make child elements in real 3D space

Example: for two blocks with the same size and different colors, one in front and one in back, use transform style: preserve-3d; The effect of.

```<style>
.cube {
position: relative;
width: 200px;
height: 200px;
margin: 100px auto;
background-color: pink;
transition: all 2s;
/*Place child elements in 3D space*/
transform-style: preserve-3d;
}
.cube div {
position: absolute;
left: 0;
top: 0;
width: 200px;
height: 200px;
}
.front {
background-color: orange;
/* Approach me 200px */
transform: translateZ(200px);/*The two faces are hierarchically separated in space*/
}
.back {
background-color: green;
}
/* cube hover To see the effect of space */
.cube:hover {
transform: rotateY(55deg);
}
</style>