CSS3-3D conversion

CSS3-3D conversion

Let’s first look at what 3D is: 3D effect is that elements are presented and transformed on the X-axis, Y-axis, and Z-axis respectively.

1. 3D rendering

   transform-style is used to control whether the child element opens the three-dimensional environment
   transform-style: flat; not open, the default
   transform-style: preserve-3d; open the
   code is written to the parent, but affects the child box

2. 3D perspective (perspective)

   If you want to produce a 3D effect in a web page, you need to
   write the perspective on the parent box of the observed element. The
   unit is px. The smaller the value, the more obvious the 3D effect.

3. 3D displacement

   transform:translate3d(x,y,z) shorthand
   transform:translateX();
   transform:translateY();
   transform:translateZ; (the unit is usually px)

body {
            perspective: 500px;
        }
 div {
            width: 200px;
            height: 200px;
            background-color: pink;
            transition: all 5s;//设置5秒的过渡效果
 }
  div:hover {
            transform: translate3d(400px, 100px, 100px);//鼠标移动到div元素上，元素在X方向移动400px，在Y方向移动100px，在Z方向移动100px
}
<div></div>

4. 3D rotation

   transform: rotateX (deg);
   transform: rotateY (deg);
   transform: rotateZ (deg);
   transform: rotate3d (x, y, z, deg); (简写)

body {
            perspective: 100px;
            transform-style: preserve-3d;
        } 
img {
            display: block;
            width: 250px;
            margin: 150px auto;
            transition: all 2s;//设置2秒的过渡效果
        }
img:hover {
            transform: rotateX(45deg);/鼠标移动到img元素上，元素绕X轴顺时针旋转45°
}
<img src="自行车.jpg">

5. transition

   transition: all .5s; (set 0.5 second transition effect)