Shulou(Shulou.com)06/03 Report--

This article mainly shows you the "sample analysis of new features in css3", which is easy to understand and well-organized. I hope it can help you solve your doubts. Let the editor lead you to study and study the "sample analysis of new features in css3".

Css3 is split into the following small modules, selectors, box models, backgrounds and borders, text effects, 2D/3D transformations, animation, multi-column layout, and user interface

2D conversion

Use the transform: attribute to set the 2D transformation for the element, using a compatible browser with the prefix-webkit--moz-

Use the rotate () method to rotate the element by a certain angle. Parameter: angle

For example: transform:rotate (30deg); deg is the unit of angle

Use the translate () method to displace the element. Parameters: X axis, y axis.

For example: transform:translate (10pxMagol 10px)

Use the scale () method to change the scale of the element, parameters: X-axis scale, y-axis scale

For example: transform:scale (2Pol 2)

Using the skew () method, stretch the element, parameters: X-axis angle, y-axis angle

For example: transform:skew (20degjol 20deg)

Use matrix () method, multi-transformation combination, parameter: Matrix, I do not understand

3D conversion

Use rotateX () and rotateY () methods to rotate elements, which are not supported by browsers. Parameter: angle

Transition effect

Use the transition: attribute to animate the transition of the element. Compatible browsers with the prefix-webkit--moz-, must have a style that takes effect only when it is modified, so you can see the effect by changing the style of the element when you hover it.

Use transition: attribute, parameter: css style duration

For example: transition:width 2s

Use commas to separate multiple changes in parameters, transition: style time, style 2 time 2,.

Animation

Create animation @ keyframes rule, @ keyframes rule name {}

In the content, use the percentage to divide the progress of the animation and change the style.

0% {some styles}

25% {some styles}

50% {some styles}

75% {some styles}

100% {some styles}

Use animation: attribute to set animation rules, parameters: rule name, execution time, speed curve, delay time, playback times, loop playback

For example: animation:bitch 2s ease 0s 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 } these are all the contents of the article "sample Analysis of New Features in css3". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.