1. Deformation

transform: element objects can be rotate d, scale d, moved translate, skew, matrix deformations.
Example:

transform: rotate(90deg) scale(1.5,0.8) translate(100px,50px) skew(45deg,45deg);
/*Matrix Deformation*/
matrix(<number>,<number>,<number>,<number>,<number>,<number>);
/*perspective*/
perspective(length);

transition: excessive attribute

transition: the css attribute name of the overeffect overeffects the speed curve of the long-speed effect overeffects the start time of the overeffects;

transition: property duration timing-function delay;
/*Example*/
transition:1s ease all;
-webkit-tansition:1s ease all;
-moz-transition:1s ease all;
-o-transition:1s ease all;
web Front End Development Learning Q-q-u-n:  767273102 ，Share development tools, zero basics, advanced video tutorials, hope novices take less steps

rotate(): An element rotated in two-dimensional space.

If the element has a perspective value set, rotate3d() can be used to rotate in three-dimensional space.

rotateX(angele)/*Equivalent to rotate3d(1,0,0,angle) specifying X-axis rotation in three-dimensional space*/
rotateY(angele)/*Equivalent to rotate3d(0,1,0,angle) specifying Y-axis rotation in three-dimensional space*/
rotateZ(angele)/*Equivalent to rotate3d(0,0,1,angle) specifying Z-axis rotation in three-dimensional space*/

scale()

scaleX(<number>)/*Scale elements only on the X-axis (horizontal)*/
scaleY(<number>)/*Scale only on Y axis (vertical)*/
scaleZ(<number>)/*Zoom only on the Z-axis if: Element sets perspective value*/

translate([,]): Move, is the amount of displacement.

translateX(<translation-value>);/*Move only on the X-axis (horizontal)*/
translateY(<translation-value>);/*Move only on the Y-axis (vertical)*/
translateZ(<translation-value>);/*Move only on the Z-axis if: Element sets perspective value*/

skew(): tilt

skewX(<angle>);/*Tilt only on X-axis (horizontal)*/
skewY(<angle>);/*Tilt only on Y axis (vertical)*/

matrix(a,c,e,b,d,f): Matrix distortion, the values of c, e are expressed as sine or cosine values.

a: for scaleX(); X-axis scaling
c:skewY(); Y-axis oblique
e:skewX(); X-axis oblique
b:scaleY(); Y-axis scaling
d:translateX() X-axis movement
f:translateY() Y-axis movement

transform:matrix(<number>,<number>,<number>,<number>,<number>,<number>);

perspective(): Perspective

.wrap{
    perspective:1000px; 
}
.wrap .child{
    transform:perspective(1000px);
}

2. Transition

transition-property: excessive attribute

transition-property:all;/*Excessive effect for all elements*/
transition-property:none;/*No element has an excessive effect*/
transition-property:ident;/*Specifying the css attribute has an overeffect, such as width*/

transition-duration: excessive time
transition-delay: Delay time, when negative, the overaction will start at that point and the previous action will be truncated.
transition-timing-function: excessive effect, default ease.

transition-timing-function:ease;/*Mitigation effect, equivalent to cubic-bezier(0.25,0.1,0.25,1.0) function, cubic Bezier*/
transition-timing-function:linear;/*Linear effect, equivalent to cubic-bezier(0.0,0.0,1.0,1.0) function*/
transition-timing-function:ease-in;/*Gradient effect, equivalent to cubic-bezier(0.42,0,1.0,1.0) function*/
transition-timing-function:ease-out;/*Gradient effect, equivalent to cubic-bezier(0,0,0.58,1.0) function*/
transition-timing-function:ease-in-out;/*Gradient fade effect, equivalent to cubic-bezier(0.42,0,0.58,1.0) function*/
transition-timing-function:cubic-bezier;/*Special Cubic Bezier Curve Effect*/

3. Animation

animation-name: The name of the animation, which must be used with the rule @keyframes, because the animation name is defined by @keyframes and separated by commas if multiple attribute values are provided.

@keyframes corresponds to a namespace followed by a noun and can be animated if the animation-name in the class defines the corresponding name.The keywords from and to can be used directly when defining an animation to transition from one state to another.

.animation_name{
    left:0;
    top:100px;
    position: absolute;
    -webkit-animation: 0.5s 0.5s ease infinite alternate;
    -moz-animation: 0.5s 0.5s ease infinite alternate;
    -webkit-animation-name:demo;
    -moz-animation-name:demo;
}
@-webkit-keyframes demo{
    from{left:0;}
    to{left:400px;}
}
@-webkit-keyframes demo1{
    0%{left:0;}
    50%{left:200px;}
    100%{left:400px;}
}
web Front End Development Learning Q-q-u-n:  767273102 ，Share development tools, zero basics, advanced video tutorials, hope novices take less steps

animation-duration: animation time

animation-timing-function: Playback method with the following values:

ease: mitigation effect, equivalent to cubic-bezier(0.25,0.1,0.25,1.0) function, cubic bezier.
Linear: linear effect
ease-in: Gradient effect
ease-out: fading effect
ease-in-out: fading effect
step-start: jump to the end of the animation immediately
step-end: Keep the animation starting and jump to the end of the animation as soon as the execution time is over
step([,[start | end]]?): The first parameter, numberis the specified number of intervals, that is, the animation is divided into n-step phases, the second parameter defaults to end, the last step state is set, start is the end state, and end is the start state. If the effect set conflicts with animation-fill-mode, animation-fill-mode is usedSet to animation end state.
cubic-bezier(,): special cubic cybel curve effect

animation-delay: start playing time

animation-iteration-count: The number of times played, with a value of infinite, to indicate infinite loop play

animation-direction: Play direction, value:

Normal: normal direction
reverse: the animation runs backwards, always in the same direction as normal
alternate: animation loops forward and backward alternating motion

animation-fill-mode: state after playback, value:

none: default, not set
forwards: keep the animation at the end
backwards: returns to the state at the beginning of the animation after the end
both: after completion, you can follow two rules: forwards and backwards
animation-play-state: Retrieves or sets the state of the object animation by value:
running: by default, Sports
paused: pause

4. Associated Attributes

transform-origin: The origin of the transformation, the reference point of the transformation, defaults to the center point of the element.There are two parameters, one is the transverse coordinate and the other is the ordinate coordinate.

Percentage: coordinate values specified as a percentage can be negative
Length: specify coordinate value with length, negative
left center right: value in horizontal direction
top center bottom: value in vertical direction

perspective-prigin: A perspective origin, a 3D element defined on the X and Y axes, that allows changing the bottom position of a 3D element. When this attribute is defined, it is a child element of an element, the perspective, and not the element itself.
Note: This property must be used with the perspective s property, affecting only the elements of the 3D conversion.
Value: percentage, length, left, center, right, top, center, bottom

Backface-visibility: Hide the back of the content, which is visible by default. The transformed content is still visible after inversion. When backface-visibility sets hidden, the content will be hidden after rotation, and the front will no longer be visible after rotation.
Value: visible, hidden
transform-style: 3D rendering, which sets how embedded elements are rendered in 3D space, has two values:
flat: all child elements are present on the 2D plane
preserve-3d: preserve 3D space