CSS image processing and animation

Discuss several CSS issues first

1,css how to clear floating

2,CSS Center

3, multi-line ellipsis

4, Small layout tips

Animation feature Compatibility: Transform, transition, animation

The transform can rotate, scale, tilt, and move four types of warp processing.

Transition, animation

First, transform

1.scale: scale, 1 is the original size. Scale (x). The positive number zooms in and the negative number shrinks. When the property value is one, the X/Y axis

The scale of the x and Y axes is controlled separately when the property value is two values.

As follows:

2.rotate: horizontal Rotation, the property value format is xdeg. (deg is the meaning of "degree") rotate (xdeg). X is positive

Rotate clockwise when the number is negative, counterclockwise

As follows:

3.translate: locates elements and repositions elements based on the XY axis. Translate (XPX,YPX). As follows:

4.skew: tilts the element horizontally. Skew (xdeg,ydeg). This is more difficult to describe, imagine the flat

Row Quadrilateral Bar. When the property value is one, the x and Y axes have the same parameters, and the x and Y axes are tilted at two.

As follows:

5.matrix: Matrix, six values.

As follows:

About Matrix:

2d Matrix provides 6 parameters AH a,b,c,d,d,e,f The basic wording of the following:

Review the high school math, or linear algebra, to know the matrix calculation method. X and Y are meta

The original coordinates, X ' and Y ' are transformed by the matrix to obtain the new coordinates. Through the middle one.

3x3 transformation matrix, the original coordinates to apply the transformation, you can get new coordinates. According to the matrix transformation rules can be obtained: x ' =ax+cy+e, y ' =bx+dy+f.

Transform in the translate,scale,rotate,skew behind the implementation of the principle also corresponds

The Matrix change: Translate (x, y)

First, mobile translate

The move matrix parameter is: Matrix (1,0,0,1,δx,δy) (Δx,δy corresponds to the increment of x and y axes, respectively).

This formula shows that:

-webkit-transform:translate (100px,100px); that corresponds to-webkit-transform:matrix (1, 0, 0, 1, 100, 100);

Calculate: x ' = 1*x+0 * y+100 = x+100, y ' = 0 * x+1 * y+100 = y+100.

Second, zoom scale

The scale matrix parameter is: Matrix (kx*x,0,0,ky*y,0,0) (KX, and KY respectively for X and y axes

The rate of release). This formula shows that:

-webkit-transform:scale (1.5,1.5), and corresponds to-webkit-transform:matrix (1.5, 0, 0, 1.5, 0, 0);

Calculate: x ' = 1.5*x+0 * y+0 = 1.5 * x, y ' = 0 * x+1.5 * y+0 =1.5 * y.

Third, rotating rotate

The rotation matrix parameter is: Matrix (cosθ,sinθ,-sinθ,cosθ,0,0), so

-webkit-transform:rotate (45deg); that corresponds to-webkit-transform:matrix (0.53, 0.85,-0.85, 0.53, 0, 0); (sin (45′) = 0.85,cos (45′) =0.53)

Estimation: x ' = X*cos (45′)-y*sin (45′) +0 = X*cos (45′)-y*sin (45′), y ' =

X*sin (45′) +y*cos (45′) +0 = X*sin (45′) +y*cos (45′)

Four, oblique cut skew

The chamfer matrix parameter is matrix (1,tan (Θy), tan (θx), 1,0,0),

-webkit-transform:skew (45deg); that corresponds to-webkit-transform:matrix (1,0,1,1,0,0); (Tan (45′) =1)

Extrapolated:x ' = X+y*tan (45′) +0 = X+y*tan (45′), y ' = X*tan (45′) +y+0 =

X*tan (45′) +y

Four values can be combined and can be used to specify datum points, Transform-origin

3D Animation Feature Properties

Processing ideas and 2D similar, just have 2D matrix processing extended to 3D matrix processing

The 3d matrix is a perspective projection that is similar to the 2d matrix

3d transformation matrix code example, matrix changed to Matrix3D

-webkit-transform:matrix3d (1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)

Rotate3d (x, y, z, Angle)

"Parameter description"

X, Y, z form the direction vector (Direction vector), the direction of rotation is from the direction vector this

Point pointing to the clockwise direction of the Transition-origin

Angle clockwise rotation along the Transition-origin ==> V (x, y, z) rotation axis

Angle

Figure Rotate3d How to determine the axis of rotation

From the point of view, V1 is the location of Transition-origin points, the default is V1 (0,0,0), V2 is

The first three values of the Rotate3d (X,y,z,angle), which determines the rotation axis and then rotates the angle angle clockwise along the axis of rotation.

Rotatex (angle) ==> Rotate3d (1,0,0,angle)

Rotatey (angle) ==> Rotate3d (0,1,0,angle)

Rotatez (angle) ==> rotate3d (0,0,1,angle) rotate (angle)

A similar principle combines 2D's matrix parameters that can introduce several other properties of the matrix

Second, transition

Transiton:porperty Duration timing-function Delay

property indicates which attribute is over, duration represents animation time, Timing-function table

Shows the way in which the transition is made, and delay executes after the delay.

p {

-webkit-transition:all. 5s ease-in-out 1s;

-o-transition:all. 5s ease-in-out 1s;

-moz-transition:all. 5s ease-in-out 1s;

transition:all. 5s ease-in-out 1s;

}

Transition involves another mathematical concept: Bezier interpolation.

Transition transform function has linear ease ease-in ease-out ease-in-out several, pass

We often feel slightly different when we try to use them.

In fact, they are the result of three Bezier interpolation calculations using different parameters. Review the Bezier interpolation:

A quantity (which can be any vector or scalar) from one value to another, if we want it to transition smoothly over time, it must be interpolated.

In the most basic case, we think that this change is carried out in a uniform time, and this time we call it linear interpolation. In fact, the linear interpolation is not enough to meet our needs, so there are many other mathematical interpolation algorithms, in which Bessel interpolation is very typical. It determines the relationship of values to time based on the control points in some transformations.

The K-Bezier interpolation algorithm requires a k+1 control point, and the simplest Bezier interpolation is linear interpolation

Values, the time is expressed as a range of 0 to 1, and the one-time Bezier interpolation formula is:

Quadratic Bezier interpolation has 3 control points, which are equivalent to Bezier interpolation of P0 and P1,p1 and P2 respectively.

Value, and then do a Bezier interpolation calculation of the result

Three times Bezier interpolation is the result of two times two Bezier interpolation to do one Bessel interpolation:

Back to our transition, we're going to use a three-time Bezier interpolation algorithm.

Think of time as 0,1 interval, to be transformed attribute also think is 0,1 interval, then all control function all

Is three times the Bezier function:

Ease

The ease function is equivalent to the Bezier curve (0.25, 0.1, 0.25, 1.0).

Linear

The linear function is equivalent to the Bezier curve (0.0, 0.0, 1.0, 1.0).

Ease-in:

The Ease-in function is equivalent to the Bezier curve (0.42, 0, 1.0, 1.0).

Ease-out:

The Ease-out function is equivalent to the Bezier curve (0, 0, 0.58, 1.0).

Ease-in-out:

ease-in-out function equals Bezier curve (0.42, 0, 0.58, 1.0)

Cubic-bezier:

A specific cubic-bezier curve. (x1, y1, x2, y2) four values specific to point P1 and points on a curve

P2. All values must be in the [0, 1] area, otherwise invalid.

Finally, each function diagram is attached, please identify yourself:

Third, animation

Functions with transition, but the transition function can only be started by the specified property

Values and end values, and then smooth transitions between the two properties without complex animation effects, while animation achieves a more complex effect by using keyframes and defining element attribute values in keyframes.

Animation:name duration timing-function delay iteration_countdirection;

(1)-webkit-animation-name The use of this attribute must be used in conjunction with @-webkit-keyframes

@-webkit-keyframes fontchange{

0%{font-size:10px;}

30%{font-size:15px;}

100%{font-siez:12px;}

}

The percentage means the percentage of duration, and if no duration is set, it is represented as Infinity

div{-webkit-animation-name:fontchange;}

(2)-webkit-animation-duration indicates the duration of the animation

(3)-webkit-animation-timing-function represents the time curve used by the animation

"Syntax":-webkit-animation-timing-function:ease | Linear | ease-in | Ease-out |

Ease-in-out

(4)-webkit-animation-delay indicates the delay before the animation starts

"Grammar"-webkit-animation-delay:delay_time;

(5)-webkit-animation-iteration-count indicates that the animation will be repeated several times

"Grammar"-webkit-animation-iteration-count:times_number;

(6)-webkit-animation-direction indicates the direction of the animation

"Syntax"-webkit-animation-direction:normal (default) | Alternate

Normal direction always forward

Alternate direction forward when the number of repetitions is even, opposite in odd direction

CSS image processing and animation