Home > Article > Web Front-end > CSS3 four attribute analysis (deformation, transition, animation, association)
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(<number>,<number>,<number>,<number>,<number>,<number>); /*透视*/ perspective(length);
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;
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轴旋转*/
scale()
scaleX(<number>)/*只在X轴(水平方向)缩放元素*/ scaleY(<number>)/*只在Y轴(垂直方向)缩放*/ scaleZ(<number>)/*只在Z轴缩放,前提:元素设定透视值*/
translate([,]): Movement is the displacement amount.
translateX(<translation-value>);/*只在X轴(水平方向)移动*/ translateY(<translation-value>);/*只在Y轴(垂直方向)移动*/ translateZ(<translation-value>);/*只在Z轴移动,前提:元素设置透视值*/
skew():skew
skewX(<angle>);/*只在X轴(水平)倾斜*/ skewY(<angle>);/*只在Y轴(垂直)倾斜*/
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 propertytransform:matrix(<number>,<number>,<number>,<number>,<number>,<number>);transition-duration: transition time transition-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.
.wrap{ perspective:1000px; } .wrap .child{ transform:perspective(1000px); }3. Animation
animation-name
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*/
animation-duration
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 effectease-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 immediatelystep([,[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
animation-direction
: The playback direction. The value is:normal: Normal Direction reverse: The animation runs in reverse, and the direction is always similar to normal
alternate: The animation will cycle forward and reverse alternatelyanimation-fill-mode
: The state after playback , Value:
none: Default value, not set
forwards: Keep the state where the animation ends after the end
both: Can be followed after the end Two rules for forwards and backwards animation-play-state: Retrieve or set the state of the object animation, value: running: default, motion
paused: paused
four , Associated attributes
transform-origin
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
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!