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

This article mainly introduces css how to create a 3D three-dimensional bar chart, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.

The sample code works best in WebKit browsers and quite well in Firefox (v13).

1. Set up the grid

First set up a # stage element where we can define the perspective in which we will view any 3D conversion. It's basically the location of the viewer associated with the flat screen. Then, because we are creating the graph, we need to set up the axis and grid (# chart).

Although we could easily create a background image and tile it to form a grid pattern, we decided to use the CSS linear gradient syntax. In all the code below,-moz-styles only copies the-webkit- style.

# stage {

-webkit-perspective:1200px

-webkit-perspective-origin:0%0%

-moz-perspective:1200px

-moz-perspective-origin:0%0%

Background:rgba (0pr 255pr 255pl 0.2)

}

# chart {

Position:relative

Margin:10emauto

Width:400px

Height:160px

Border:1pxsolid#000

Background:-webkit-repeating-linear-gradient (left,rgba) 0Perry 0) 0PersonRgba (0px) 38px Zuccc40px),-webkit-repeating-linear-gradient (bottom,rgba (0Perry 0Person0Person0), rgba (0px 0rem 0) 38px Juncc40px)

Background:-moz-repeating-linear-gradient (left,rgba) 0Perry 0) 0PersonRgba (0px) 38px Zuccc40px),-moz-repeating-linear-gradient (bottom,rgba (0Perry 0Person0Person0), rgba (0px 0rem 0) 38px Juncc40px)

-webkit-transform-origin:50%50%

-webkit-transform:rotateX (65deg)

-webkit-transform-style:preserve-3d

-moz-transform-origin:50%50%

-moz-transform:rotateX (65deg)

-moz-transform-style:preserve-3d

}

The chart size is 400x160 pixels and the grid is 40 pixels. As you can see, the background mesh consists of two repeated gradients running horizontally and vertically. The chart has been tilted 65 degrees from the screen.

2. Define 3D bar chart

Each bar chart in the chart consists of four edges and a cap. The style here is for the bar CSS class, which can then be used multiple times in different locations and colors. They are defined in HTML, which you will see shortly.

To imagine the transformation being applied, consider the vertical cross plane on the page. Then rotate the four sides away from us to form a column. simple.

.bar {

Position:absolute

Bottom:40px

Margin:04px

Width:32px

Height:40px

Outline:1pxsolid#000

Text-align:center

Line-height:40px

-webkit-transform-style:preserve-3d

-moz-transform-style:preserve-3d

Font-size:20px

}

.barfront, .barback, .barleft, .barright {

Position:absolute

Outline:inherit

Background:inherit

}

.barfront {

Width:inherit

Bottom:0

-webkit-transform:rotateX (90deg)

-webkit-transform-origin:500%

-moz-transform:rotateX (90deg)

-moz-transform-origin:500%

}

.barback {

Width:inherit

Top:0

-webkit-transform:rotateX (- 90deg)

-webkit-transform-origin:50%0

-moz-transform:rotateX (- 90deg)

-moz-transform-origin:50%0

}

.barright {

Height:inherit

Right:0

-webkit-transform:rotateY (- 90deg)

-webkit-transform-origin:100%50%

-moz-transform:rotateY (- 90deg)

-moz-transform-origin:100%50%

}

.barleft {

Height:inherit

Left:0

-webkit-transform:rotateY (90deg)

-webkit-transform-origin:0%50%

-moz-transform:rotateY (90deg)

-moz-transform-origin:0%50%

}

In the CSS code, we do not define the location or color of the bar chart in the chart. This needs to be done separately for each element. Note, however, that we have used the inherit attribute where possible to simplify the process.

3. Bar chart HTML markup

Here, you can see the code used in practice for the following demonstration. There are three bars on the chart. Each bar is a div, with four children div on four sides. You can have any number of bars and place them anywhere on the chart.

twenty

thirty

ten

In the code above, you can see the code that highlights the x position of the bar chart in the chart and the height of each bar chart (which needs to be defined for each element that makes up the bar chart). The colors we use there (red, blue, yellow) are slightly transparent.

4. Final result

If you are using a WebKit browser (Safari,Chrome,iPhone,iPad), you should see a 3D bar chart and some sliders that can be used to modify certain values. In Firefox, the bar chart has some artifacts, and the slider appears as a normal input box, but it is still valid.

1.jpg

Description:

You can change the height of a bar column by changing the value of the .bar box, for example:

thirty

Thank you for reading this article carefully. I hope the article "how to create a 3D bar chart with css" shared by the editor will be helpful to you. At the same time, I also hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

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.