[Css] new features in css3 enhance memory, csscss3

[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;}