CSS Warp transform

Transition: Excessive attributes

TRANSITION-PROPERTY Specifies the name of the CSS property that sets the over effect, and the default is to write all

transition-duration specifies how many seconds or milliseconds are required to complete an over-effect

Transition-timing-function: Default easetransition-delay: Delay time

Ease: gradually slows down

Linear: Constant speed

Ease-in: Accelerating

Ease-out: Deceleration

Ease-in-out: Acceleration at deceleration first

Cubic-bezier: Bezier Curve

Transitionend: Over-completion events

function AddEnd (OBJ,FN) {    obj.addeventlistener (' Webkittransitionend ', fn,false);    Obj.addeventlistener (' Transitionend ', Fn,false);} function Removeend (OBJ,FN) {    obj.removeeventlistener (' Webkittransitionend ', fn,false);    Obj.removeeventlistener (' Transitionend ', Fn,false);}

Note: 1 in transition, if you write more than one, it will trigger an event if you do not change the style.
2 Notice that the Transitionend event is triggered repeatedly. For example, change the y-axis position of the div again.

<! DOCTYPE html>

Transform: Deformation

Rotation: Rotate (): degrees

Chamfer: Skew (): degrees

Skewx

Skewy

Scaling: Scale (): positive, negative, decimal

ScaleX

ScaleY

Displacement: Translate (): CSS supported units can be

TranslateX

Translatey

Transform execution order: Post-write first execution

Transform:scale (2) rotate (50deg); Perform the rotation before scaling


The value of the above transform will also be changed according to the center point (transform-origin)

