After arriving in Shenzhen, I spent almost half a month visiting the Book Purchasing Center in Guangzhou, I found two front-end books, "Rebuilding HTML-improving WEB application design" and "CSS3 practices", and read half of "restructuring HTML". I found that I could not continue to see them, the content is not very useful. It may be that the current level is limited and cannot be passed through, so let's move on to CSS3. CSS3 in my mind was viewed online. I bought a book this time and made a solid big framework to avoid having to break down the arts and sciences in a short period of time. After having basically passed the book, my hand will itch, I want to make something out.
I believe you have read this example: the 3D box was first written in this way. On the fifth page of the book, there is an example of a comprehensive practice of "Designing a dynamic three-dimensional box, the implementation method is the same as that of it. My box is also designed based on it. However, there are some modifications, optimizations, and details added to the implementation, below is my box Firefox:
- The box is transparent, and the permeability is strong. Because of the transparency, the three sides on the back will be made, so there will be a total of six sides, three more than the original;
- Projection Image, making the three-dimensional sense of the box more intense;
- The handling of edges makes the transition between the box surface and the surface harmonious
You can click here to downloadSource code(Only the results under moz are written, and webkit is not written)
The HTML structure of the box is very simple, as follows:
A large box is enclosed in six sides: front, back, left, right, top, and bottom. Because of the Relationship Between Positioning and height, therefore, the sequence is actually "back, bottom, left, front, top, right". The following div will naturally stack on it, so that it can not write z-index.
- 6 pages in total:
- Previous Page
- 1
- 2
- 3
- 4
- 5
- 6
- Next Page