[CSS advanced] Try A Cool 3D view, css cool

[CSS advanced] Try A Cool 3D view, css cool

The reason why I wrote this article is that I saw this page:

Stamp me to see (mobile terminal page, watch with simulator)

Although there are some dizzy 3D images from the 3D perspective completed by CSS3, the interactive experience of people in it is very good. It is very eye-catching to use H5 pages on mobile terminals.

After mastering the principles, it is not a waste of effort. After a good study, we will share some learning processes with you.

Enter the text below: (some Gif images are large and need to wait for a while)

 

3D effect diagram

A rare sight:

We 'd better click here for a look. Here I use a div with a background color as an example. Our angle of view is in a cube. The rotation animation of the cube gives us a 3D feeling.

So what is the original image? Let's take a look at the distance:

The length is as follows:

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

With the rational use of some 3D properties provided by CSS3, it is easy to achieve the above results.

To create such a 3D image, I have already described the process in detail in my previous article. If you are interested, you can stamp it to see it:

[CSS3 advanced] Cool 3D rotating fluoroscopy

Transform-style and perspective

Let's repeat it briefly. It mainly applies two CSS attributes:

Transform-style

To use CSS3 to implement 3D effects, the most important thing is to use the transform-style attribute.

Transform-style has only two values available:

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

When the parent element is configured with transform-style: preserve-3d, you can perform 3D deformation operations on child elements, 3D deformation and 2D deformation can be the same, use the transform attribute to set, or you can operate on element variants either through a formulated function or through a three-dimensional matrix: When we specify a container's transform-style attribute value as a preserve-3d, the descendant element of the container has a 3D effect, which is a little abstract, that is, after the current parent container sets the preserve-3d value, its child element can be relative to the plane where the parent element is located, perform 3D deformation.

• 3D displacement operations are performed using translateX (length), translateY (length), and translateZ (length). Like 2D operations, displacement operations on elements can also be combined into translate3d (x, y, z;

• Use scaleX (), scaleY (), and scaleY () for 3D scaling, or combine them into scale3d (number, number, number;

• RotateX (angle), rotateY (angle), and rotateZ (angle) can also be combined into rotate3d (Xangle, Yangle, and Zangle) statements.

Perspective

// Syntax perspective: number | none;

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

If you set perspective, you will see the effect in three dimensions.

The reason why we can see the cube on the periphery of the cube and go deep into the cube is thatperspectiveThis attribute. It allows us to choose to promote the perspective, or stay away from the perspective, so we feel 3D.

Layout Structure of 3D View pages

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

Below is a better method I think:

<! -- The outermost layer container controls the image location and layout on the entire page --> <div class = "container"> <! -- Stage layer, set preserve-3d and perspective line of sight --> <div class = "stage"> <! -- Control layer: animation control layer. You can use this layer to add a rotation animation or touch an animation. --> <div class = "control"> <! -- Image layer, load the image 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>

• Outermost layercontainerTo control the position of the image and its layout on the entire page;
• stageLayer and stage layer. Set the 3D depth of field effect and add the perspective line of sight;
• controlLayer, the animation control layer, through which you can add a rotation animation or touch the animation at the mobile end, by changingtranslateZAttributes can also be closer to the distance;
• imgWrapLayer, image layer, and the image to be spliced.

Image Stitching

Image Stitching is actually a technical task and requires a lot of computing.

The cube in the Demo is used as an example, and the class isimgThe height and width of the div block is 400px * 400px. To splice four such divs into a cube, You need to rotate the four divs around the Y axis [90 °, 180 °, 270 °, 360 °], and thentranslateY(200px).

It is worth noting that it must first rotate the angle and then offset the distance. This order is very important.

Look at the top view, which means:

 

This is the simplest case. It is a right angle.

If an image needs to be split into eight parts, assume that the height and width of each image are 400400, 8The operations required for a graph are to rotate [45 °, 90 °, 135 °, 180 °, 225 °, 270 °, 315 °] sequentially around the Y axis. the offset distance istranslateY(482.84px), That is (200 + 200√ 2 ).

Look at the Top View:

:

Image Segmentation

The above examples Use div blocks with a background color. Now we select a real image and splice it into a column.

The following figure shows the size3480px * 2000px:

We divide it into 20 parts and splice it into a positive 20-side shape. Of course, we don't need to cut a piece of graph.background-positionIt can be done. In addition, the larger the number of parts, the more results the final result is like a cylindrical column, the more authentic the effect.

Is 20 edges, requires 20 Divs, assuming the container is. img-bg1 ~ . Img-bg20, then the width of each image is174pxIn turn, the angle to be incremented is 18 °, and we need to calculate the distance to be offsettranslateZ(543px).

Some CSS preprocessors can be used to process this code. below is the Sass statement:

// Sass $ imgCount: 20! Default; @ for $ I from 1 through $ imgCount {. img-bg # {$ I} {background-position :( $ I *-174px + 174px) 0; transform: rotateY ($ I * 18deg) translateZ (543px );}}

Check the effect: the Demo can be stamped here.

As shown in the figure, myopia is a cylindrical shape, but there are some minor problems:

• The selected image must be connected between the left and right sides, otherwise there will be obvious inconsistencies in the Cylindrical Junction. This requires that when you use this method to create an H5 page, the design drawings from the art must be connected between the left and right without violation.
• Another point is the split block technique. The more images are separated, the closer myopia is to a cylindrical column, the better the effect.

Control controlLayer to enter the cylindrical Screen

The last step is to push our perspective into the cylinder to create a 3D view.

We use the classcontrolThis div controls this effect, but here we are directed to the cylindrical
Internal Attributes are not modifiedperspectiveAttribute, but to adjusttranslateZAttribute. The pictures obtained by controlling translateZ are more realistic. You can control the pictures separately.perspectiveAndtranslateZThe results will be profound.

Final effect: the Demo can be stamped here. Because it is a mobile effect, it is better to enable the simulator for viewing.

The whole is too big. only part of the screenshot is taken to make the GIF:

There is also a small problem, that is, after entering the inside of the cylinder, the entire image is reversed, so we may need to use PS to flip the source image left and right once, so that after entering the inside, the source image is displayed.

At this point, the entire page is completed, and the next step is to add some touch events and some details. Some details may be omitted during the writing process. You can leave a comment if it is difficult to understand.

The Demo in this example has been uploaded to my Github:

Css33DView

 

At the end of this article, if you have any questions or suggestions, you can have a lot of discussions, original articles, and limited writing skills. If there are any mistakes in this article, please kindly advise.