CSS3+HTML5 realization of deformation and animation tutorial

Transform deformation.

Transform English meaning: change, deformation.

Transform attention in CSS3 includes the following: rotation (rotate), distortion (skew), scaling (scale), moving (translate), and matrix deformable matrices.

Grammar:

Transform:none | [ ]*

Transform:rotate | Scale | Skew | Translate |matrix;

None is the default value and does not deform.

: represents one or more transformation functions, separated by spaces. You can transform a variety of attribute operations on an element at the same time, such as using Rotate,scale and translate three.

Rotate ([])

SKEWX ()

Skewy ()

Scale ([])

Translate ([])

Matrix ()

First, rotating rotate

Rotate (): Specifies a 2D rotation (2D rotation) of the element with the specified angle parameter, preceded by the definition of the Transform-origin attribute.

Transform-origin is defined as the basis of rotation, where angle refers to the choice of angle, is rotating clockwise, negative counterclockwise rotation.

Second, translate translation

The translate () function can move an element from its original position without affecting any Web component on the x,y axis, similar to position:relative.

Translate () is divided into three different cases:

1, translate (x,y) horizontal and vertical direction at the same time move.

The base point of the Note:translate movement is by default the center of the element, which can be changed according to Transform-origin.

If the second value is not set, the default is 0.

2, Translatex (x) only horizontal direction movement.

Equivalent to translate (x,0,), the base point is the center of the element.

3, Translatey (y) only in the vertical direction of movement.

Equivalent to translate (0,y), the base point is the element in the center.

Third, scale scaling

Scale scaling and translate movement are very similar, and there are three different situations.

Zoom Center point: The center position of an element

Cardinality: Scaling is either reduced or enlarged, the scaling base is 1, greater than 1 magnified, and less than 1 smaller.

1. Scale (X,y) elements are scaled in both horizontal and vertical directions.

Note: The second parameter is not provided, then the same value as the first one is taken.

2, ScaleX (x) x axis scaling.

3, ScaleY (y) y axis scaling.

Scale can take negative values, and negative values cause elements to flip and scale.

Scale (-1.5)

Iv. Skew Shear

Skew and translate, scale as there are three of cases.

1, Skew (x,y): X-axis and y-axis skew transformation (oblique-cut transformation).

That is, the x and Y axes are distorted at the same time by a certain angle value.

If the second argument is not supplied, the value is 0, which is the Y axis without chamfered.

2, Skewx (x): Specify a skew transformation (skew transformation) along the x axis at the given angle.

3, Skewy (y): Specify a skew transformation (skew transformation) along the Y axis at the given angle.

Matrix matrices

Matrix (,,,,,): Specifies a 2D transformation in the form of a six-valued (A,B,C,D,E,F) transformation matrix, which is equivalent to applying a [a,b,c,d,e,f] transformation matrix directly. is to reposition elements based on horizontal and vertical orientation.

There are matrix transformations in the canvas of the SVG,CSS3,HTML5, and then simply say.

An element renders a bitmap and then transforms each point on the bitmap to get a new bitmap, resulting in a translation, scaling, rotation, shearing, and mirror-reflective light effect.

1. Several concepts

In matrix multiplication, you first need to confirm that two matrices can be multiplied: only the number of columns in the first matrix equals the number of rows in the second matrix, so that two matrices can be multiplied.

Left by "forward": that is, multiply on the left, a left by E that is AE.

A m*n matrix is left multiply by a n*p matrix, and a m*p matrix is obtained.

2d matrix transforms provide 6 parameter a,b,c,d,e,f, the basic formula is:

where x and y are the first coordinates of the element, X ' and Y ' are the new coordinates of the matrix transformation.

Note: The A,B,C,D,E,F6 parameters in the transformation matrix are vertical rows.

X ' =ax+cy+e

Y ' =bx+dy+f

2, the relationship between matrix transformation and transform

A, matrix and translate translation

X ' =ax+ cy+e, we set a=1,c=0, then X ' =x+e,

Y ' =bx+dy+f, also set b=0,d=1, then Y ' =y+f.

This is translate (e,f).

So translate (e,f) is a simplified matrix of transformation matrices (1,0,0,1,e,f),

(x,y) translation (tx,ty) means that a matrix transformation of "1 0 0 1 Tx,ty" is done.

b, matrix and scale scaling

X ' =ax+cy+e, we set c=0,e=0, then X ' =ax,

Y ' =bx+dy+f, we set the b=0,f=0, then y ' =dy.

This is scale (A,D).

So scale (A,D) is a simplified matrix of transformation matrices (a,0,0,d,0,0).

(x,y) Scaling (sx,sy) means making a matrix transformation of SX 0 0 sy 0 0.

c, matrix and rotate rotation

Rotate (a deg) is equivalent to "cons (a) sin (a)-sin (a) cons (a) 0 0" matrix transformation.

D, matrices and skew shear

Skewx (a deg) is equivalent to the matrix transformation of "1 0 tan (a) 1 0 0".

Skewy (a deg) is equivalent to the matrix transformation of "1 tan (a) 0 1 0 0".

So the matrix is a combination of all the 2D effects.

VI. Transform-origin

As mentioned earlier, the default base point of the element is its central position, which can be transform-origin to change its basis.

Use:

Transform-origin (x,y): Used to set the base point of an element (reference points). The default point is the center point of the element. The X,y value can be a percentage, em,px, where x can also be left,center,right,y can be top,center,bottom, as is the case with background-position.

Example

First, through an example of the transition animation effect.

Mouse up, div width from 100px to 200px.

<style type= "Text/css" >
div{
width:100px;
height:100px;
background-color:red;
}
div:hover{
width:200px;
}
</style>
<div></div>

This effect is actually animation, but very change very fast, not smooth.

If you want to put the mouse up after the div width in 5s smooth transition to 200px. Only need to add one line of code;

div:hover{
width:200px;
Transition:width 5s ease-in;
}

Here is the transition attribute, which is used to achieve a smooth transition of property values, visually produce animation effects.

The transition used above is abbreviated and contains four attributes: Transition-property,transition-duration,transition-timing-function,transition-delay, The following will be introduced.

Transition

CSS3 new Transition property can make the effect more delicate and smooth when the style of the event-triggering element changes.

Transition is used to describe how to make CSS property values smooth from one value to another over time. This transition effect can be triggered by clicking on the mouse, getting focus, being clicked, or any change to the element.

Grammar:

Transition: [< ' transition-property ' > | | < ' transition-duration ' > | | < ' transition-timing-function ' > || < ' Transition-delay ' > [, [< ' Transition-property ' > | | < ' transition-duration ' > | | < ' Transition-timing-function ' > | | < ' Transition-delay ' >]]*

Transition has four property values:

Transition-property: The property that performs the transition.

Transition-duration: Specifies the time required to complete the transition.

Transition-timing-function, in the continuation time period, the transition transformation rate change, the simple understanding is specifies the transition function.

Transition-delay: Transition delay time.

1, Transition-property

Transition-property is used to specify which property uses the transition animation effect.

Grammar:

Transition-property:none | All | [ ] [ ',' ]*

None: No transition effects are applied to all properties.

All: Default value. When the value is all, the element will perform a transition effect when any property values change.

Ident: element attribute name. Specify which properties are specified by ident. If a property in the specified attribute cannot apply a transition effect, other properties are still in effect.

A transition property can have a transition effect only if it has an attribute with a midpoint value (the attributes that require animation). All of the CSS property values and the types of values that can be implemented in the transition effect are listed in the consortium, which is viewed here.

Property Name Type
Background-color as Color
Background-position as repeatable list of simple list of length, percentage, or Calc
Border-bottom-color as Color
Border-bottom-width as length
Border-left-color as Color
Border-left-width as length
Border-right-color as Color
Border-right-width as length
Border-spacing as simple list of length
Border-top-color as Color
Border-top-width as length
Bottom as length, percentage, or Calc
Clip as Rectangle
Color as Color
Font-size as length
Font-weight as Font weight
Height as length, percentage, or Calc
Left as length, percentage, or Calc
Letter-spacing as length
Line-height as either number or length
Margin-bottom as length
Margin-left as length
Margin-right as length
Margin-top as length
Max-height as length, percentage, or Calc
Max-width as length, percentage, or Calc
Min-height as length, percentage, or Calc
Min-width as length, percentage, or Calc
Opacity as number
Outline-color as Color
Outline-width as length
Padding-bottom as length
Padding-left as length
Padding-right as length
Padding-top as length
Right as length, percentage, or Calc
Text-indent as length, percentage, or Calc
Text-shadow as Shadow List
Top as length, percentage, or Calc
Vertical-align as length
Visibility as visibility
Width as length, percentage, or Calc
Word-spacing as length
Z-index As Integer

Note: Not what attribute changes will trigger Transiton animation effects, such as the adaptive width of the page, when the browser changes the width, does not trigger the transition effect. However, the property type changes shown in the above table will trigger a transition action effect.

For example: You can animate several properties at the same time, for example, to the height and line-height animation effect, the implementation of div variable height text is still vertically centered.

<! doctype html> 



 


 

2, Transition-duration

Transition-duration is used to set the time that is required to transition from the old property to the new property, that is, the duration.

3, Transition-timing-function

Grammar:

= Ease | Linear | ease-in | Ease-out | Ease-in-out | Step-start | Step-end | Steps ([, [Start | end]]?) | Cubic-bezier (,,,)

The Transition-timing-function property refers to the transition "easing function". This function creates an acceleration curve, so the speed of change can change continuously during the whole transition change. Mainly includes the following functions.

Ease: Default value, element style transitions from initial state to end state speed from fast to slow, slowly.

Linear: Meaning is a linear transition, that is, the transition process at constant speed.

Ease-in: Faster and faster, with an accelerated state, often referred to as the "fade effect."

Ease-out: The speed is more and more slow, showing deceleration state, often known as the "Fade effect."

Ease-in-out speed first accelerated after deceleration, known as the "Fade Fade effect."

Example: The mouse passes the question mark, helps the information fade fade.

<!doctype html> 





 

4, Transition-delay

Transition-delay sets how long the animation starts when the property value is changed.

5. Attribute Shorthand

When changing the transition effect of multiple CSS properties, separate several transition declarations with commas, and each attribute has its own transition time and effect.

Note: The first time is the length, the second is the delay.

a{transition:background 0.8s ease-in 0.3,color 0.6s ease-out 0.3;}

Bezier Curves and Transition

The mathematical model of transition is the Bezier curve, described below.

The curve is actually the interpolation effect between two points, Bezier curve is an interpolation algorithm, more complex than linear interpolation.

Bezier curves: Start point, endpoint (also called Anchor Point), control point. The shape of the Bezier curve changes by adjusting the control point.

The K-order Bezier interpolation algorithm needs to k+1 a control point.

First Order Bezier curve (line segment): Meaning is a continuous point from P0 to P1 to describe a segment. One Bezier interpolation is linear interpolation.




 




 

Hill Bessel Curve (parabola): P0-P1 is the tangent of the curve at the P0 point.




 




 

Sanche Besel Curve:




 




 

Transition use is the Sanche Besel interpolation algorithm, the following figure.

Time is in the 0,1 range, and the property to be transformed is considered to be 0,1 interval. The coordinates of P0 and P3 are always (0,0) and (1,1). The Transition-timing-function property is used to determine the coordinates of the P1 and P2.




 

Ease [0, 0] [0.25, 0.1] [0.25, 1.0] [1.0,1.0]

Linear [0, 0] [0.0, 0.0] [1.0, 1.0] [1.0,1.0]

ease-in [0, 0] [0.42, 0] [1.0, 1.0] [1.0,1.0]

ease-out [0, 0] [0, 0] [0.58, 1.0] [1.0,1.0]

ease-in-out [0, 0] [0.42, 0] [0.58, 1.0] [1.0,1.0]

Step-start Steps (1,start)

Step-end Steps (1,end)

Cubic-bezier (X1,y1,x2,y2) [0, 0] [x1, y1] [x2, y2] [1.0,1.0]

Iv. other relevant information

Canvas Bezier curve: View Source

<! doctype html public  "-//w3c//dtd xhtml 1.0 transitional//en"   "http://
Www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">