Implementation of pure CSS3 transparent crystal box

Source: Internet
Author: User

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:

  1. 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;
  2. Projection Image, making the three-dimensional sense of the box more intense;
  3. 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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.