Css3--transition

One, the conversion definition:

1, can change the element shape, size, position

2, there are two types of conversions:

All-in-A-Z conversions: Only in X,y-axis changes:

Example: rotation (rotate), stretching (scale), panning (move), tilt (skew)

3D conversion: In addition to the X, they axis can also change the z axis.

such as: space rotation ...

Two, the conversion attribute (transform: Using 2D, 3D):

1, prompt:

currently the browser does not fully support all transform , IE9, Firefox and opera only support 2D transforms , the corresponding CSS is defined as:-ms-transform , -moz-transform and-o-transform , while Safari and chrome support 2D and 3D transforms , the corresponding CSS Defined as:-webkit-transform .

2, take value:

Transform:none(default value, which indicates that the element is not converted)

Transform-functions(represents one or more conversion functions, separated by a space):

Explanation:CSS3 morphing is a collection of effects, such as panning, rotating, zooming, and skewing, each of which is called a morph function (Transform functions)

wording:

Transform:: Rotate (angle) scale (x, y)/(0 to value) skewx (angle) translate (x, y);

3,transform-origin () property:

1), by default, the origin of the deformation is at the center point of the element ;

notation: transform-origin: values/ percentages/ keywords (left, right, top, bottom);

A value that represents the position of all axes

Two values: Represents the X- axis and Y- axis

Three values: Represents the X- axis, Y- axis, and Z -axis;

4, 2D Displacement:

1)translate (panning ) desirable value: Numeric, percentage, or negative

2)scale (scaling ) desirable value: Default value is 1, zoom out:0 to 1, enlarge: value greater than 1;

3)rotate (rotation ) desirable value: According to the origin, the element is rotated clockwise by the given angle

Allow negative values, elements will rotate counterclockwise

4)skew (tilt ) desirable value, the position of the origin, around the X-axis and the Y-axis, can also be tilted at a certain angle, may change the shape of the element

5, the Transform-style attribute is also used frequently in 3D effects,

1) Theflat value is the default value, which indicates that all child elements are rendered in the 2D plane. preserve-3d indicates that all child elements are rendered in 3D space.

2) If Transform-style is set to an element with a value of flat, all child elements of that element will be flattened into the 2D plane of the element for rendering. 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.

The Transform-style property needs to be set in the parent element, and above any nested deform elements.

Demo:

HTML:

<div class= "Wrap" >

<div class= "Spin" >

<div class= "Rotate" >

</div>

</div>

</div>

<div class= "Wrap" >

<div class= "Spin" >

<div class= "Rotate three-d" >

</div>

</div>

</div>

CSS:

. Wrap {

width:500px;

height:300px;

margin:30px Auto;

position:relative;

Background:url (68.jpg) No-repeat Center Center;

background-size:100% 100%;

}

. Spin {

width:142px;

height:200px;

Position:absolute;

top:50%;

left:50%;

Margin-left: -72px;

Margin-top: -101px;

border:1px dashed orange;

Cursor:pointer;

transform-style:preserve-3d;

}

. Rotate {

Background:url (images/cardkingclub.png) no-repeat Center;

background-size:100% 100%;

border:5px solid Hsla (50,50%,50%,.9);

Transform:perspective (200px) Rotatey (45deg);

}

. Rotate img{

border:1px solid Green;

Transform:rotatex (15deg) Translatez (10px);

transform-origin:0 0 40px;

}

/* Change The default value for Transform-style * /

. three-d {

transform-style:preserve-3d;

}

6, 3D conversion

1) Perspective attribute (Chinese meaning: Perspective, Perspective)

The Perspective property sets the distance from the lens to the element plane. All elements are placed on the plane of the z=0. For example , Perspective (300px) indicates that the position of the lens from the element surface is 300 pixels.

2) Features:

A, when you define a perspective property for an element , its child elements get a perspective, not the element itself

b, only affects 3D conversion elements

Note that the default 3D effect is not obvious? This is because the lens is too far from the plane, so the rotation effect is not obvious. Try the perspective property. Set the perspect=400px.

3) 3D displacement mainly includes

Translatez (z)

Translate3d (x, Y, z)

Explanation: For elements without Rotatex and Rotatey, thefunction of Translatez is to let elements in their eyes or near or far (combined with the diagram on the blackboard);

4) 3D rotation mainly includes

Rotatex (deg)

Rotatey (deg)

Rotatez (deg)

Rotate3d (X,Y,Z,DEG)

5) 3D scaling mainly includes

Scalez (z)

Scale3d (x, Y, z)

Demo:

HTML:

<section id= "Darkblue" class= "container" >

<div class= "box" ></div>

</section>

CSS:

. container {

width:200px;

height:200px;

margin-bottom:50px;

border:1px solid Gray;

}

. box {

width:100%;

height:100%;

Opacity:. 75;

}

#darkblue {

perspective:600px;

}

#darkblue. Box {

Background-color:darkblue;

Transform:translatez (50px);

}

Css3--transition