CSS3 four attribute analysis (deformation, transition, animation, association)-CSS Tutorial-php.cn

1. Transform

transform: You can rotate rotate, scale, move translate, tilt skew, and matrix deform matrix on element objects.
Example:

transform: rotate(90deg) scale(1.5,0.8) translate(100px,50px) skew(45deg,45deg); /*矩阵变形*/ matrix(,,,,,); /*透视*/ perspective(length);

Copy after login

transition: Transition attribute

transition: css attribute name of transition effect Transition effect duration Speed curve of speed effect Transition effect start time;

transition: property duration timing-function delay; /*示例*/ transition:1s ease all; -webkit-tansition:1s ease all; -moz-transition:1s ease all; -o-transition:1s ease all;

Copy after login

rotate():Rotate elements in two-dimensional space.

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

rotateX(angele)/*相当于rotate3d(1,0,0,angle)指定在三维空间内的X轴旋转*/ rotateY(angele)/*相当于rotate3d(0,1,0,angle)指定在三维空间内的Y轴旋转*/ rotateZ(angele)/*相当于rotate3d(0,0,1,angle)指定在三维空间内的Z轴旋转*/

Copy after login

scale()

scaleX()/*只在X轴（水平方向）缩放元素*/ scaleY()/*只在Y轴（垂直方向）缩放*/ scaleZ()/*只在Z轴缩放，前提：元素设定透视值*/

Copy after login

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

translateX();/*只在X轴（水平方向）移动*/ translateY();/*只在Y轴（垂直方向）移动*/ translateZ();/*只在Z轴移动，前提：元素设置透视值*/

Copy after login

skew()：skew

skewX();/*只在X轴（水平）倾斜*/ skewY();/*只在Y轴（垂直）倾斜*/

Copy after login

matrix(a,c,e,b,d,f)：matrix deformation, c , the value of e is represented by sine or cosine value.

a: represents scaleX(); X-axis scaling
c: skewY(); Y-axis tilt
e: skewX(); X-axis tilt
b: scaleY(); Y Axis scaling
d：translateX()

##transition-property

: transition property

transform:matrix(,,,,,);

Copy after login

transition-duration: transition timetransition-delay: delay time, when it is a negative number, transition action It will be displayed from this point in time, and the previous actions will be truncated.

Transition-timing-function: transition effect, default ease.

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

Copy after login

3. Animation

animation-name

: animation name, must be used in conjunction with the rule @keyframes, because the animation name is defined by @keyframes , if multiple attribute values are provided, separate them with commas.

@keyframes

is equivalent to a namespace, followed by a noun. If the animation-name in the class defines the corresponding name, the animation can be executed. When defining animation, you can directly use the keywords from and to to transition from one state to another.

transition-property:all;/*针对所有元素都有过度效果*/ transition-property:none;/*没有元素有过度效果*/ transition-property:ident;/*指定css属性有过度效果，例如width*/

Copy after login

animation-duration: Animation time
animation-timing-function
: Playback method, the values are as follows:
ease: Ease effect, equivalent to cubic-bezier(0.25,0.1,0.25,1.0) function, that is, cubic Bezier.linear：linear effect
ease-in：fading effect
ease-out：fading effectease-in-out：fading effectstep-start：jump immediately Go to the end state of the animation
step-end: Keep the start state of the animation. When the animation execution time is over, jump to the end state of the animation immediately
step([,[start | end]]?): The first parameter number is the specified number of intervals, that is, the animation is divided into n steps for phased display. The second parameter defaults to end, which sets the last step state. start is the state at the end, and end is the state at the beginning. If set with animation- The effect of fill-mode conflicts, and the setting of animation-fill-mode is the animation end state.
cubic-bezier(,,,): Special cubic zebel curve effect

animation-delay
: Start playback time

animation-iteration -count
: The number of playback times. When the value is infinite, it means infinite loop playback.
animation-direction
: The playback direction. The value is:
normal: Normal Directionreverse: The animation runs in reverse, and the direction is always similar to normal
alternate: The animation will cycle forward and reverse alternately
animation-fill-mode
: The state after playback , Value:

none: Default value, not set
forwards: Keep the state where the animation ends after the end
backwards: Return to the state when the animation starts after the end
both: Can be followed after the end Two rules for forwards and backwardsanimation-play-state: Retrieve or set the state of the object animation, value:running: default, motion
paused: paused

four , Associated attributes

transform-origin
: Transformation origin, reference point of transform, defaults to the center point of the element. There are two parameters, parameter one is the abscissa, and parameter two is the ordinate.
Percentage: Use percentage to specify coordinate value, can be negativelength: Use length to specify coordinate value, can be negative
left center right: Take the value in the horizontal direction
top center bottom: Take the value in the vertical direction Value
perspective-prigin
: Perspective origin, defined on the X-axis and Y-axis of the 3D element, allowing the bottom position of the 3D element to be changed. When this attribute is defined, it is a child of an element The element, the perspective, not the element itself.
Note: This attribute must be used together with the perspective attribute, which only affects 3D transformed elements.
Values: percentage, length, left, center, right, top, center, bottom
backface-visibility: Hide the back side of the content, the back side is visible by default, inverted The content after the transformation is still visible. When backface-visibility is set to hidden, the content will be hidden after rotation, and the front face will no longer be visible after rotation.Values: visible, hidden
transform-style: 3D rendering, sets how embedded elements are rendered in 3D space. There are two values:
flat: all child elements are rendered in a 2D plane
preserve-3d: Preserve 3D space

The above is the detailed content of CSS3 four attribute analysis (deformation, transition, animation, association). For more information, please follow other related articles on the PHP Chinese website!