How to realize css3 sphere

This article is about how the css3 sphere is implemented. Xiaobian thinks it is quite practical, so share it with everyone for reference. Let's follow Xiaobian and have a look.

css3 How to implement a sphere: 1. Create a square element with equal width and height, and set it to a circle using the border-radius attribute;2. Use "background:radial-gradient(...) "statement adds a radially gradient background color to a circular element to achieve a spherical effect.

Operating environment of this tutorial: Windows 7 system, CSS3 && HTML5 version, Dell G3 computer.

css3 Steps to implement a sphere:

1. Basic shape

Let's start with a basic circle, HTML code is as follows:

The new HTML5 tag figure is used here, but other tags can also be used. The figure tag is designed to display images or other graphical content on a web page. To achieve a circular effect, add some basic styles:

.circle {display: block;background: black;border-radius: 50%;height: 300px;width: 300px;margin: 0;}

2. Radial gradient

The basic circular effect is implemented above, and a radial gradient effect is added here to achieve a more realistic sphere.

.circle { display: block; background: black; border-radius: 50%; height: 300px; width: 300px; margin: 0; background: -webkit-radial-gradient(100px 100px, circle, #5cabff, #000); background: -moz-radial-gradient(100px 100px, circle, #5cabff, #000); background: radial-gradient(100px 100px, circle, #5cabff, #000);}

3. Add shadows to enhance the three-dimensional sense

The basic sphere effect is already present in the previous section. To increase the three-dimensional effect, we add a shadow to the bottom of the sphere, so that the three-dimensional effect is stronger.

The HTML code used here is as follows:

CSS code is as follows:

.stage { width: 300px; height: 300px; display: inline-block; margin: 20px; -webkit-perspective: 1200px; -webkit-perspective-origin: 50% 50%; } .circle .shadow { position: absolute; width: 100%; height: 100%; background: -webkit-radial-gradient(50% 50%, circle, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0) 50%); -webkit-transform: rotateX(90deg) translateZ(-150px); z-index: -1; }

CSS is Cascading Style Sheets, a computer language used to represent file styles such as HTML or XML. CSS can not only decorate web pages statically, but also dynamically format elements of web pages with various scripting languages.

Thank you for reading! About "how to realize css3 sphere" this article is shared here, I hope the above content can be of some help to everyone, so that everyone can learn more knowledge, if you think the article is good, you can share it to let more people see it!