"css advanced" Try a cool 3D view

The reason for writing this article is because you see this page:

Poke me at it (mobile page, using simulator to Watch)

Using CSS3 to complete the 3D perspective, although there are some halo, but the interaction experience that makes people feel very good, use on the mobile side to make some H5 page is very bo people eyeball.

and master the principle of production is not a waste of power, a good study after some of the learning process to share to EVERYONE.

Enter the text below: (some Gif pictures larger, need to wait a While)

3D effect schematic

Seeing is believing, first intuitively feel the above effect I said:

It's better to take a look inside, where I use a div with a background color as an example, our perspective is in a cube, and the rotation of the cube gives us a 3D feel.

So what does the original figure look like? We pull away from the distance, to find Out:

is long like this:

Compared to the first effect, what we actually do is to push our perspective into the cube, with a sense of the presence of the SCENE.

and reasonable use of some of the 3D properties provided by CSS3, it is easy to achieve the above Results.

To make such a 3D graphic, I have described the process in detail in the previous article, interested can poke in to see:

"CSS3 advanced" Cool 3D rotation perspective

Transform-style and Perspective

To recap briefly, the main use of the two CSS properties:

Transform-style

To achieve 3D effect with CSS3, The most important thing is to use the Transform-style Attribute.

Transform-style only two values can be selected:

Syntax: transform-style:flat|preserve-3d; transform-style:flat; By default, child elements will not retain their 3D position transform-style:preserve-3d; The child element retains its 3D Position.

when the parent element is set to transform-style:preserve-3d, it is possible to perform a 3D warp on the child element, with 3D morphing as well as the 2D variant, set with the transform property, alternatively, the element variant can be manipulated by a defined function or by a three-dimensional matrix: when we specify a Container's Transform-style property value of preserve-3d, the Container's descendant elements will have a 3D effect, which is a bit abstract, That is, after the current parent container has set the preserve-3d value, its child elements can be 3D deformed relative to the plane where the parent element is Located.

• 3D displacement operation with TranslateX (length), Translatey (length), Translatez (length), as with 2D operations, displacement of elements or merging into Translate3d (x, y, z) Such a notation;

• Use ScaleX (), ScaleY (), ScaleY () to perform 3D scaling operations, or you can merge them into Scale3d (number,number,number) notation;

• 3D rotation is performed using Rotatex (angle), rotatey (angle), Rotatez (angle), or it can be combined into Rotate3d (xangle,yangle,zangle) Notation.

Perspective

Grammatical perspective:number|none;

simply put, when the element is not set perspective, that is, when perspective:none/0 all descendant elements are compressed on the same two-dimensional plane, there is no depth of field effect. Perspective sets the distance of a three-dimensional perspective for an element, only for the descendants of the element, not its element itself.

If you set perspective, you will see a three-dimensional effect.

It is because of this attribute that we can see the cube on the outside of the cube and into the inside of the square body perspective . It gives us the ability to choose a propulsion perspective or to stay away from the perspective, so we have a 3D feel.

layout Structure of the 3D view page

To achieve such an effect, a flexible layout is required to control the display of the entire 3D Effect.

Here's One way I think it's better:

<!--the outermost container, controls the position of the graphic and the layout on the entire page--><div class= "container" ><!--stage layer, set preserve-3d and perspective sight distance  -- ><div class= "stage" ><!--control layer, animation control layer, through which you can add rotation animation or touch animation--><div class= "control" ><!--picture layer, Load the picture we want to Splice--><div class= "imgwrap" ><div class= "img img1" ></div><div class= "img img2" >< /div><div class= "img img3" ></div><div class= "img img4" ></div></div></div> </div></div>

• Outermost container , controls the position of the graphic and the layout on the entire page;
• stagelayer, stage layer, starting from here set 3D depth of field effect, add perspective sight;
• controllayer, the control layer of the animation, through this layer can be added to rotate animation or touch animation on the mobile side, by changing the translateZ properties can also be closer to pull the distance perspective;
• imgWraplayer, picture layer, Loading the picture we want to splice, we'll mention it later.

Picture Stitching

Picture splicing is actually a technical work, need a lot of calculation.

Using the cube in the Demo above as an example, class img div block aspect is 400px*400px. Then to use 4 such div stitching into a cube, you need to separate 4 div around the Y-axis rotation [90°, 180°, 270°, 360°], and then translateY(200px) .

It is important to note that the order of rotation is first, and then the distance is Shifted.

Look at the top view, that's what this means:

This is the simplest case, all at right Angles.

If a graph needs to be divided into eight parts, assuming that each picture is divided into a aspect of 8, the action to be done is to rotate around the Y-axis in turn [45°, 90°, 135°, 180°, 225°, 270°, 315°, 360°], The offset distance is translateY(482.84px), i.e. (+2).

Look at the top view:

：

Image Segmentation

The above example is used with a background-colored div block, and now we pick a real picture and stitch it into a column.

The following figure is the size 3480px * 2000px :

We divide it into 20 parts, and make it into a 20-side shape, of course, without a piece of the chart down, the use background-position can be completed. And the more divided the number of copies, the final effect of the more like a cylinder, the effect is more real.

Positive 20-side shape, requires 20 div, assuming that the container is. img-bg1 ~. img-bg20, then the width of each picture is 174px , in turn, the angle to be incremented is 18°, and we need to calculate the distance to offset translateZ(543px) .

Some CSS preprocessor can be used to process this code, the following is the Sass:

The writing of Sass
$imgCount:!default; @for $i from 1 through $imgCount {. img-bg#{$i}{background-position: ($i * -174px + 174px) 0;-webkit -transform:rotatey ($i * 18deg) translatez (543px), transform:rotatey ($i * 18deg) Translatez (543px);}}

Look at the Effect: demo can poke here

It can be seen that the figure of myopia is a cylindrical shape, but there are some minor problems:

• The selected picture must be left and right connected, or the cylinder joint will have obvious uncoordinated, which requires the use of this way to make H5 page, art out of the design must be connected to no vainly disobey Sense.
• Another point is the segmentation of the block, the more pieces of image segmentation, The closer it is considered as a cylinder, the effect is Better.

control control layer, into the cylinder screen

To do this, there is only one final step, which is to push our perspective and into the inside of the cylinder, creating a sense of 3D view.

We control this by class for control this div, but here we control our entry into the Cylinder.
The internal properties are not adjusted perspective to modify properties, but rather to properties translateZ . Through the control Translatez get more real picture, you can try to control perspective and translateZ get the effect separately, you will have a deep feeling.

The final effect: the demo can be poked here, because it is the mobile side effect, open the simulator to watch better

The whole is too big, only to intercept the parts made into GIF:

There is also a small problem, that is, into the cylinder inside, the whole picture is reversed, so we may need to use PS to make a left and right flip, so into the interior, see is the original Effect.

At this point, the entire page is finished, and the next step is adding some touch events to add some Detail. May be written in the process of missing some details, what is difficult to understand the place can be in a comment message.

This sample demo has been uploaded on my Github:

Css33dview

To this end of this article, if there are any questions or suggestions, you can communicate a lot, original articles, writing limited, caishuxueqian, If there is not in the text, million hope to Inform.

"css advanced" Try a cool 3D view