The difference and connection between translate, transform and translation in CSS3

Translate: A method of moving, transform

with the Translate () method, the element moves from its current position, based on the given left (x-coordinate) and top (y-coordinate) positional parameters:usage transform:translate (50px, 100px);-ms-transform:translate (50px,100px);-webkit-transform:translate (50px,100px);-o-transform:translate (50px,100px);-moz-transform:translate (50px,100px); transform: Deformation. ChangeCSS3 mainly includes rotation: rotate () Rotates the given angle clockwise, allowing a negative value of rotate (30deg)twist: Skew () element flips the given angle, according to the given horizontal line (X-axis) and vertical (Y-axis) Parameters: Skew (30deg,20deg)Scaling: Scale () zooms in or out, depending on the given width (X-axis) and height (Y-axis) Parameters: Scales (2,4)move: Translate () translation, passing in x, Y values, representing the distance between the x-axis and the y-axisall 2D conversion methods are grouped together: matrix () rotate, scale, move, and tilt elementsMatrix (scale.x,,, Scale.y, translate.x, translate.y)change the starting position transform-origin:bottom left;   Integrated use: Transform:30deg 1.5 30deg 20deg 100px 200px; transition: Allows a smooth transition of CSS property values within a certain time interval,requires an event trigger, such as click, get focus, lose focus, etc.transition:property duration timing-function delay;Property:css Properties, for example: width height is none when all movement is stopped, can be transform           Duration: DurationTiming-function:ease, etc.delay: DelayedNote: All animations when property is allFor example: transition:width 2s ease 0s;

The difference and connection between translate, transform and translation in CSS3