Use CSS3 transformation, transition, animation, and related attribute analysis

1. Transformation

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

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

transition: transition attribute

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

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

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

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

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

scale()

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

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

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

skew(): skew

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

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() X-axis movement
f：translateY() Y-axis movement

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

perspective()：Perspective

<strong>.wrap{<br>    perspective:1000px; 
<br>}<br>.wrap .child{<br>    transform:perspective(1000px);<br>}</strong>

2. Transition

transition-property: transition property

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

transition-duration: Transition time
transition-delay: delay time, when it is negative, the transition action will start to be displayed from this time point, and the previous action will be truncated.
Transition-timing-function: transition effect, default ease.

<strong>transition-timing-function:ease;/*缓解效果，等同于cubic-bezier(0.25,0.1,0.25,1.0)函数，既立方贝塞尔*/<br>transition-timing-function:linear;/*线性效果，等同于cubic-bezier(0.0,0.0,1.0,1.0)函数*/<br>transition-timing-function:ease-in;/*渐显效果，等同于cubic-bezier(0.42,0,1.0,1.0)函数*/<br>transition-timing-function:ease-out;/*渐隐效果，等同于cubic-bezier(0,0,0.58,1.0)函数*/<br>transition-timing-function:ease-in-out;/*渐显渐隐效果，等同于cubic-bezier(0.42,0,0.58,1.0)函数*/<br>transition-timing-function:cubic-bezier;/*特殊的立方贝塞尔曲线效果*/</strong>

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.

<strong>.animation_name{<br>    left:0;<br>    top:100px;<br>    position: absolute;<br>    -webkit-animation: 0.5s 0.5s ease infinite alternate;<br>    -moz-animation: 0.5s 0.5s ease infinite alternate;<br>    -webkit-animation-name:demo;<br>    -moz-animation-name:demo;<br>}<br>@-webkit-keyframes demo{<br>    from{left:0;}<br>    to{left:400px;}<br>}<br>@-webkit-keyframes demo1{<br>    0%{left:0;}<br>    50%{left:200px;}<br>    100%{left:400px;}<br>}</strong>

animation-duration: animation time

animation-timing-function: playback method, the values ​​are as follows:

ease: The mitigation effect is equivalent to the cubic-bezier(0.25,0.1,0.25,1.0) function, which is cubic Bezier.
linear：linear effect
ease-in：fading effect
ease-out：fading effect
ease-in-out：fading effect
step-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 direction
reverse: the animation runs in reverse, 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 animation ended state after the end
backwards: Return to the animation after the end State at the beginning
both: After the end, you can follow the two rules of forwards and backwards
animation-play-state: Retrieve or set the state of the object animation, value:
running: default, motion
paused : Pause

4. Associated attributes

transform-origin: Transform 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 negative
length: Use length to specify coordinate value, can be negative
left center right: Horizontal value
top center bottom: 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 defining this attribute, It is a child element of an 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 of the content, the back 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 Use CSS3 transformation, transition, animation, and related attribute analysis. For more information, please follow other related articles on the PHP Chinese website!