[Css] new features in css3 enhance memory, csscss3
Css3 is split into the following small modules, selector, box model, background and border, text effects, 2D/3D conversion, animation, multi-column layout and user interface
2DConversion
Use the transform attribute to set 2D conversion for elements. compatible with browsers and prefix-webkit--moz-
Use the rotate () method to rotate an element to an angle. Parameter: Angle
For example: transform: rotate (30deg); deg is the angle Unit
Use the translate () method to let the element shift, parameters: X axis, Y axis
Example: transform: translate (10px, 10px );
Use the scale () method to change the proportion of elements. parameters: X-axis ratio and Y-axis ratio.
Example: transform: scale (2, 2 );
Use the skew () method to stretch elements. parameters: X axis angle and Y axis angle.
Example: transform: skew (20deg, 20deg );
Using the matrix () method, combining multiple transformations, parameters: matrix, I don't understand
3DConversion
The rotateX () and rotateY () methods are used to rotate elements, which are not supported by many browsers. parameters: Angle
Transition Effect
Use the transition attribute to set the transition animation effect for the element. compatible with the browser prefix-webkit--moz-, the style must take effect only when it is modified. Therefore, in: you can see the effect by modifying the element style during hover.
Use transition: attribute, parameter: css style duration
Example: transition: width 2 s;
Multiple changes are separated by commas. transition: style time, Style 2 time 2 ,...
Animation
Create an animation @ keyframes rule, @ keyframes rule name {}
In the content, the percentage is used to divide the animation progress and change the style.
0% {some styles}
25% {some styles}
50% {some styles}
75% {some styles}
100% {some styles}
Use animation: property to set an animation rule. parameters: Rule name, execution time, speed curve, delay time, playback times, and loop playback.
Example: animation: bitch 2 s limit 0 s infinite;
@keyframes bitch{ 0%{ opacity: 0; } 50%{ opacity: 1; } 100%{ opacity: 0; }}#test{ width: 100px; height: 100px; background: red; animation:bitch 2s ease 0s infinite;}