CSS3 Transform Property attached demo

Reference http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/

• Usage
• Instance

The first use of this property is because of the needs of the work, the production of H5 animation page, by checking the specific usage can also make a variety of small animation, such as panning, zooming, flipping, just beginning to see these animations are very surprised, incredibly short write a small piece of things can be done JS write a bunch of code animation, And then see other people's home CSS3 animation, again be educated man.

Let's talk about how to use it.

Transform

Definition: The Transform property applies a 2D or 3D conversion to an element. This property allows us to rotate, scale, move, or skew elements.

Syntax: transform:none|transform-functions;

Specific reference w3c:http://www.w3school.com.cn/cssref/pr_transform.asp

You can generally add

-webkit-transform:matrix (N,n,n,n,n,n)

-o-webkit-transform:matrix (N,n,n,n,n,n)

-moz-webkit-transform:matrix (N,n,n,n,n,n)

This type of prefix resolves some of the low-version browser compatibility issues

The transform:perspective (n) attribute in these properties is important in the 3D transformation.

Perspective

Definition and Usage: The Perspective property defines the distance, in pixels, of the 3D element from the view. This property allows you to change the 3D element view of the 3D element.

When you define a perspective property for an element, its child elements get a perspective instead of the element itself.

Note: The Perspective property only affects 3D conversion elements.

Visual Range I understand your eyes. At the top of the screen, define the elements of the perspective distance from the screen is the distance of sight

Translatez

When perspective is defined, it can be better grasped by using Translatez. See the element distance from your visual focus by defining the value of Translatez (n px)

By changing the value of the Translatez, change the distance between the element and you, Translatez the closer you are, the greater you see

When translatez>perspective, the element cannot be seen because you have crossed the element.

Transform-style

Definition and Usage: The Transform-style property specifies how nested elements are rendered in 3D space.

Note: This property must be used in conjunction with the Transform property.

Set the Transform-style:preserve-3d property so that the element has a display effect

Demo

By reference to the example of a roundabout, this example writes a three-dimensional cyclotron cube on this basis.

 <DivID= ' group1 '>            <P></P>            <P></P>            <P></P>            <P></P>            <P></P>            <P></P>            <P></P>        </Div>

By setting the rotate of each p to form a cube, and then calculating the length and width of the cube, the cube shape is determined by Translatez

#groups1 {                position:relative;                transform-style:preserve-3d;                width:100%;                height:300px;                margin-top:100px;                Transition:transform 1s;            }        P:nth-child (1) {            Transform:rotatey (0deg) Translatez (150px);        }        P:nth-child (2) {            Transform:rotatey (90deg) Translatez (150px);        }        P:nth-child (3) {            Transform:rotatey (180deg) Translatez (150px);        }        P:nth-child (4) {            Transform:rotatey (270deg) Translatez (150px);        }        P:nth-child (5) {            Transform:rotatex (90deg) Translatez (150px);        }        P:nth-child (6) {            Transform:rotatex (270deg) Translatez (150px);        }

Change the rotate value of the element by JS, then change it once every 1s by timing, so that the cube will turn up

vartransrotatex=function(){                varDegnum=_randomnum () *deg, Rota=parseint (Rotatex) +parseint (Degnum); Ele.style.transform= ' Rotatex (' +rota+ ' deg) '; Rotatex=_validate (Ele.style.transform); Countx++; }, Transrotatey=function(){                varDegnum=_randomnum () *deg, Rota=parseint (Rotatey) +parseint (Degnum); Ele.style.transform= ' Rotatey (' +rota+ ' deg) '; Rotatey=_validate (Ele.style.transform); County++; },

Because recently started to learn Git's usage, as well as JS's various writing, modularization and so on, so the code may not be concise and elegant, but through a single exercise, always good ~

Attached code GitHub address: Https://github.com/xshaobaozi/transform3D

CSS3 Transform Property attached demo