CSS3 Practical Ferris wheel Picture Carousel +3d Cube +3d Tag Cloud (Perspective, Transform-style, Perspective-origin)

This paper mainly through the Ferris wheel Picture Carousel Example to explain some of the properties related to CSS3 3D.

　　Demo Preview :

1. Ferris wheel Picture Carousel (seemingly not compatible with 360 best with chrome)
2. 3D cube (chromeonly)
3. 3D Tag Cloud (CSS3 version chromeonly)
4. 3D Tag Cloud (JS edition Chromeonly)

Previous article review

In the previous article CSS3 Practice of Picture Carousel (Transform,transition and animation) we simply learned about CSS3 's Transform, transition, and animation. In retrospect, transform is mainly about stretching, rotating, moving, and so on, transition can gradually change elements from one style to another, and animation can make the elements change between the n styles in turn. In fact, for me, is interested in the first two, after all, do animation is not the strength of CSS.

This demo mainly involves CSS3 's perspective, Transform-style, and Perspective-origin attributes.

Perspective, Transform-style, Perspective-origin

The first two properties are essential for implementing the 3d effect under CSS3, and why so, let's illustrate by example.

First of all we need to write a basic HTML file according to the demo, the core code is as follows:

The HTML structure consists of three layers, #stage #container->.img. Stage represents the 3d stage, which can contain a lot of 3d containers (container), and the container is the need to show the "audience" has a 3d effect of things (the demo is a picture).

• Perspective

Here the perspective attribute, perspective can be interpreted as the distance, popular perspective value is the point of view (Perspective-origin) to the computer screen (Z axis direction), the lower the value, the user and 3D space z plane distance closer. If you do not set the perspective property, the element will not have a 3D effect, as if it were a view from a far place (you can think of a three-view).

Perspective there are two ways of writing, the first is written on the stage, the second is written on 3d elements, and the other properties of transform are written together, the code is as follows:

#stage {  width:805px;  height:600px;  BORDER:1PX solid;  -webkit-perspective:500px;  -webkit-perspective-origin:17% 50%;}

img {  position:absolute;  top:110px;  -webkit-transform:perspective (600px) Rotatey (45deg);}

The second is to make each 3d element has a viewpoint (the default is the element center), I feel almost useless, after all, animation effects need to simulate the human eye to see the results, that is, a viewpoint.

Two ways to compare can poke Zhang Xin Xu written demo: Poke here thanks to the author ~

• Perspective-origin

Closely related to perspective and its good brother Perspective-origin,perspective interpreted as sight, then Perspective-origin is the viewpoint. The Perspective-origin attribute can be empty, which defaults to perspective-origin:50% 50%, which is seen from the center of the stage (if the perspective attribute is added to the stage), Perspective-origin and perspective generally appear at the same time (that is, added to the same element of the CSS), the specific value method can refer to the CSS3 Transform-origin property

Example code can refer to perspective instance code

• Transform-style

Transform-style is as important as perspective, and both are indispensable. Where the flat value is the default value, indicating that all child elements are rendered in the 2D plane. Preserve-3d indicates that all child elements are rendered in 3D space. Rotating the element along the x-axis or y-axis causes the child elements at the positive or negative z-axis position to appear on the plane of the element, not before or after it. If the value of Transform-style is set to an element of preserve-3d, it means that no flattening operation is performed, and all of his child elements are in 3D space. Since we all said to achieve the 3d effect, the general value of course is preserve-3d!

The Transform-style property needs to be set in the parent element of the 3d animation element , and is higher than any nested deform element. Instance code:

#container {  position:absolute;  width:500px;   height:500px;  -webkit-transform-style:preserve-3d;  -webkit-transition:all 2s ease-in-out;}

• Backface-visibility

As the name implies, it determines whether the element rotates back visible. The following are the results of having the backface-visibility attribute of the 3d element in the demo set to hidden:

Instance code (corresponding to the second picture):

img {  position:absolute;  top:110px;  -webkit-backface-visibility:hidden;}

　

Summary: So later if you want to write 3d effect CSS elements, as long as the demo in the HTML file to write the stage and container elements, and then add perspective in the stage, Again in the container to add transform-style:preserve-3d Basic is OK.

About Ferris wheel-type picture carousel

First write good #stage-> #container->.img form of HTML files, plus perspective and Transform-style attributes, 9 pictures share 360 degrees, you can make each picture around the x-axis rotation 40*i degrees angle:

Then each picture then sets the value of the Translatez, it will make the picture divided into circles:

var IMGs = document.getelementsbytagname (' img '); for (var i = 0; I <= 8; i++) {  var deg = $ * I;  Imgs[i].style.webkittransform = '  + ' Rotatex (' + deg + ' deg) ' + '   translatez (' + + + ' px) '  + ' scale (0.25,0.2 5) ';}

Finally, with the mouse wheel event, each scrolling allows the container element to rotate the specified angle around the x-axis, and of course the rotation process requires transition help:

var containerdeg = 0;window.onmousewheel = Document.onmousewheel = function (e) {  containerdeg + = E.WHEELDELTA/15; 
   document.getelementbyid (' container '). Style.webkittransform = ' Rotatex (' + containerdeg + ' deg) '}

It is worth noting that the center of the original image and the center of the container to be consistent, just set the picture (Position:absolute) left and top values on it.

Full source code can be consulted: source please poke

About 3D cubes and 3D tag clouds

3D Cube and 3D Tag cloud (CSS3 version) Implementation and image rotation is similar to the source point around the x-axis and y-axis rotation at a certain angle, the use of Translatez this method around the source point dispersed.

• 3D Cube

Set the 6-width div, then rotate the desired angle around the x and Y axes, and set the same Translatez value (in order to conveniently write in JS, you can also directly calculate the value written in CSS):

Initvar Initanglex = [0, 0, 0];var Initangley = [0, 0, 0, 0, a, 270];var AngleX = 0;var Angley = 0;//Co Ntainer rotation angle var Totalanglex = 0;var Totalangley = 0;for (var i = 0; i < 6; i++) {  var d = document.createelement (' di V ');  D.style.backgroundcolor = ' # ' + (' 00000 ' + parseint (math.random () * 0xffffff). ToString (+)). Slice ( -6);  D.classname = ' face ';  D.style.webkittransform = '    + ' Rotatex (' + initanglex[i] + ' deg) '     + ' rotatey (' + initangley[i] + ' deg) '     + ' tr Anslatez (' + + ' px) ';  document.getElementById (' container '). appendchild (d);}

Then for the effect to add rotation, here directly set the SetInterval function to change the entire container rotation angle:

Addlistenerdocument.getelementbyid (' container '). AddEventListener ("MouseMove", function (event) {  var x = event.clientx-200;  var y = event.clienty-200;  Window.angley =  x/10/1000 *;  Window.anglex =-y/10/1000 * 60;}); SetInterval (function () {  Totalanglex + = AngleX;  Totalangley + = Angley;  document.getElementById (' container '). Style.webkittransform = '    + ' Rotatex (' + Totalanglex + ' deg) '     + ' Rotatey (' + Totalangley + ' deg) ';}, 1000/60);

You can also write the effect directly on the CSS, such as set a Pseudo-class (: hover), the inside of the CSS to write a change, and then set the next transition OK.

• 3D Tag Cloud

Do a two version, JS version and CSS3 version, but in fact all need to use JS, but the latter is the core of CSS3.

First to review the JS version, perhaps the JS version is more suitable for the actual use, it is true, the reality of similar 3d tag cloud is basically JS implementation. The core of the JS version is to obtain a 3-D coordinate of the average distribution of n points on a sphere, then flatten the z-axis down to two dimensions to draw, the sphere rotates with the new coordinates to redraw, and the demo is to make a new position determination of the label. For more information, refer to my previous article "Rotate 3d Basics"

The "focal length" (focalLength) in the flat in JS version is the perspective in CSS3.

JS version of the z-axis flattening code:

FocalLength = 300;var Scale = focalLength/(focalLength + this.pos3.z); this.pos2.x = + this.pos3.x * scale;this.pos2. y = this.pos3.y * scale;this.a.style.fontsize = * Scale;this.a.style.color = ' Rgba (' +this.r+ ', ' +this.g+ ', ' +this.b + ', ' + math.min (1, scale) + ') ';

POS3 is the position of 3d space, and Pos2 is the position of 2d, using a triangle similar (near big far small):

The distance between the screen position and the imaging location is the z-value size of the 3d object.

The CSS3 version is not, eliminating the cumbersome 3d->2d conversion process, a tag can be directly 3d changes. Just as the element is rotated, the text within the a tag cannot be rotated in a controlled manner.

Specific will not be launched, interested can refer to the source code: Poke here

Previously with JS written 3d special effects (poke demo1 Demo2 Demo3), in fact, can also be implemented with CSS3, the core function is rotate and translate! If you are interested, you can try it.

Summarize

In general, setting the perspective and Transform-style properties is essential if you want DOM elements to render a 3d effect.

Because the above an article has the garden friends reflect did not do compatibility, the picture of this article Carousel demo I also specifically do the compatibility (FF rendering is really slag ...) ), but still did not be compatible with 360, do not know what reason, anyway to do compatible with the egg is the pain is, after the need for the time to do a compatible bar ...

Landlord to the above understanding is not in-depth, if there are questions welcome communication guidance.

Reference article:

1. Transform-style and Perspective Properties
2. OK, CSS3 3D transform transform, that's it!
3. Understanding: Translate rotate and perspective ambiguous relationship

CSS3 Practical Ferris wheel Picture Carousel +3d Cube +3d Tag Cloud (Perspective, Transform-style, Perspective-origin)