Shulou(Shulou.com)06/01 Report--

This article mainly introduces "how to achieve 3D navigation bar in html". In daily operation, I believe many people have doubts about how to achieve 3D navigation bar in html. Xiaobian consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful for you to answer the doubts of "how to achieve 3D navigation bar in html"! Next, please follow the editor to study!

3D is the abbreviation of three-dimensional, which means 3D graphics. Display 3D graphics in a computer, that is, display 3D graphics in a plane. Unlike the real world, the real three-dimensional space, there is a real distance space. It just looks like the real world in the computer, so the 3D graphics displayed in the computer just make people look real. One of the characteristics of the human eye is that it is large and small, and it will form a three-dimensional sense.

The computer screen is two-dimensional, and the reason why we can enjoy the real three-dimensional image is that the human eye has the visual illusion because of the different color grayscale when it is displayed on the computer screen. the two-dimensional computer screen is perceived as a three-dimensional image. Based on the relevant knowledge of color, the protruding part of the edge of a three-dimensional object generally shows a bright color, while the concave part is dark due to being obscured by light. This understanding is widely used in the drawing of buttons and 3D lines in web pages or other applications. For example, the 3D text to be drawn, that is, display a high-brightness color in the original position, and outline it with a low-brightness color in the lower left or upper right, so as to produce the visual effect of 3D text. In the specific implementation, two different colors of 2D text can be drawn in different positions with exactly the same font. As long as the coordinates of the two characters are appropriate, 3D text with different visual effects can be produced.

Case

3D navigation bar

Code:

* {margin: 0; padding: 0;} ul {margin: 100px;} ul li {width: 120px; height: 35px; list-style: none; perspective: 500px; float: left; margin: 05px;} .box {width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: all .3s } .box: hover {transform: rotateX (90deg);} .front, .bottom {width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: flex; justify-content: center; align-items: center;} .front {background-color: pink; transform: translateZ (17.5px);} .bottom {background-color: teal / * transform-origin: center bottom; * / transform:translateY (17.5px) rotateX (- 90deg) At this point, the study on "how to implement the 3D navigation bar in html" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.