This is the 28th day of my participation in the August Text Challenge.More challenges in August

We’ve already covered 2D transformations, so what are we going to learn about 3D transformations, and how are they different from 2D transformations?

In our daily life, the environment is 3D, the objects we see are ALSO 3D, and the photos we take are the appearance of 3D objects in 2D plane.

The characteristics of the 3 d

  • (The closer we are to our eyes, the bigger they look, and the farther away they look, the smaller they look)
  • Object behind occlusion is not visible

Based on these features we can simulate and build 3D effects on the web.

Three dimensional coordinate system

So 2D is a planar coordinate system, and 3D is a three-dimensional coordinate system. The three-dimensional coordinate system actually refers to the three-dimensional space, which is composed of three axes.

  • X-axis: horizontal to the right. The right-hand side of x is positive, the left-hand side is negative
  • Y-axis: straight down. Y is positive, y is negative
  • Z-axis: Vertical screen. It’s positive in the outside, negative in the inside

The left origin in our web page is the top left corner of our screen.

3 d conversion

In 3D transformation we will focus on 3D shift and 3D rotation which are most commonly used in work

Main knowledge points

  • 3D displacement: Translate3D (x, Y, Z)
  • Rotate3d (x,y,z)
  • Perspective: the perspective
  • 3 d rendering transfrom – style

3D mobile – Translate3D

3D movement on the basis of 2D movement added a can move direction, is the z axis direction

  • Transform :translateX(200px) moves only on the x axis
  • Transform :translateY(200px) moves only on the y axis
  • Transform :translateZ(200px) moves only on the Z axis
  • Transform: translate3D (x,y,z) translate3D (x,y,z

Here we use code to demonstrate:

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3d demo</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            transform: translateX(100px) translateY(100px) translateZ(100px);
        }
    </style>
</head>

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

</html>
Copy the code

In the code above, we move the pink box 100 pixels along the X, y, and Z axes, but when we run it, the Z axis doesn’t seem to change significantly. This is because movement in the Z direction requires perspective. Now let’s see what perspective is.

Perspective perspective

The Perspective property defines the distance, in pixels, of a 3D element from the view. This property allows you to change 3D elements to see the view of 3D elements. When the Perspective attribute is defined for an element, its children get perspective, not the element itself.

When we go to the cinema to watch 3D movies, if we watch them directly with our eyes, we can’t see the obvious 3D effect. Instead, every time the cinema gives us 3D glasses, the 3D effect will be very obvious when we watch the movies with the help of 3D glasses. So in our web page if we also need to let us see the 3D effect is obvious, it needs to use perspective

  • If you want to create a 3D effect on a web page, you need to use perspective.
  • The visual position of human is simulated, and the effect of realizing elements near large and far small can be simulated by virtue of perspective and translateZ
  • The units of perspective are pixels
  • The smaller the perspective, the more obvious the effect

Note:

  1. Perspective must be written above the parent box of the element being viewed
  2. The Perspective attribute affects only 3D transformation elements
  3. In order to change the effect of translateZ, it must use perspective, otherwise translateZ has no effect
<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3d demo</title>
    <style>
        body{
            perspective: 200px;
        }
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            transform: translateX(100px) translateY(100px) translateZ(100px);
        }
    </style>
</head>

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

</html>
Copy the code

In the code above, we added a perspective to the body of the parent div element. When we look at the pink box, we see that it is significantly larger than it would have been without perspective. That’s what perspective does. The above example may not be obvious enough, but let’s look at another example of Rotat3D to make it more obvious

3 d rotation rotate3d

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

Grammar:

  • Transform :rotateX(Xdeg) : Forward rotation x degrees along the x axis
  • Transform :rotateY(Ydeg) : Forward rotation of y degrees along the y axis
  • Transform :rotateZ(Zdeg) : Forward rotation z degrees along the Z axis
  • Transform: Rotate3D (x, Y, Z, DEG) : Rotate along a custom axis. Deg is the rotation degree

The direction of rotation of elements is also positive and negative, so how to distinguish the direction of rotation of elements, let’s learn the left hand rule, with our left hand can determine the direction of positive and negative

Left hand rule:

  • The fingers of the left hand point in the positive direction of the X, y, and Z axes
  • The rest of the fingers bend in the direction that the element rotates along the X, y, and Z axes

​

The following code is an example of a forward rotation along the X-axis

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
<style>
#div1
{
position: relative;
height: 150px;
width: 150px;
margin: 50px;
padding:10px;
border: 1px solid black;
perspective:50;
-webkit-perspective:150; /* Safari and Chrome */
}

#div2
{
padding:50px;
position: absolute;
border: 1px solid black;
background-color: pink;
transform: rotateX(45deg);
-webkit-transform: rotateX(45deg); /* Safari and Chrome */
}
</style>
</head>

<body>

<div id="div1">
  <div id="div2">HELLO</div>
</div>
 
</body>
</html>
Copy the code

The above code will look like the first image below if we do not add perspective, and the second image below if we use perspective, so it is obvious how perspective works.

3 d rendering transform – style

The transform-style property specifies how nested elements are rendered in 3D space.

Note:

  1. This property must be used with the transform property
  2. Code, like perspective, must be written on the parent element, but on the child element

Grammar: transform – style: flat | preserve – 3 d;

value describe
flat Child elements will not retain their 3D position.
preserve-3d The child element will retain its 3D position.

Here’s an example:

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
<style>
body{
	perspective: 300px;
}
.box{
	position:relative;
	width:200px;
	height:200px;
	margin:100px auto;
    transition:all 1s;
    transform-style: preserve-3d;
}
.box:hover{
	transform:rotateY(45deg)}.box div{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color: pink;
}

.box div:last-child{
	background-color:green;
    transform:rotateX(60deg)}</style>
</head>

<body>

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

</body>
</html>
Copy the code

In the code above, there are two small boxes nested inside a big box. When we hover over the big box, we first rotate the green box 60 degrees forward along the X-axis, and then rotate the big box 45 degrees forward along the Y-axis. So when we do not use transform-style decoration, we will get the effect of the first image, while when we use transform-style, we will get the appearance of the second image. This example nicely illustrates the transform-style effect (preserving the 3D effect of child elements).