Introduction to 2D and 3D conversion knowledge in CSS3

Source: Internet
Author: User

12 D Conversion

Conversion is one of the subversive features in CSS3, can realize the displacement, rotation, deformation, scaling, and even support matrix, with the learning transition and animation knowledge, can replace a large number of previously can only rely on flash to achieve the effect.

1, moving translate (x, y) can change the position of the element, X, y can be negative;

2, scaling scale (x, y) can be horizontal and vertical scaling of elements, X, y values can be decimal, not negative;

4, rotation rotate (deg) can rotate the element, positive value is clockwise, negative value is counterclockwise;

5. Tilt skew (deg, deg) can tilt the element at a certain angle

23 D Conversion

1 , 3D axes

The 3 dimensions of space are represented by X, Y, and Z, and three axes are perpendicular to one another. Such as

2 , left-hand coordinate system

Extend the left hand, let the thumb and forefinger into an "L" shape, thumb right, forefinger upward, middle finger pointing forward. So we set up a left-handed coordinate system, where the thumb, forefinger and middle finger represent the positive direction of the X, Y, and z axes, respectively. Such as

3 , left hand rule

The left hand holds the rotation axis, the thumb pointing to the axis of rotation positive direction is the rest of the finger curl direction.

Three animations

Animation is one of the most disruptive features in CSS3, which can be used to achieve complex animations by setting up multiple nodes to precisely control one or a set of animations.

1 , necessary elements:

A, the animation sequence is specified by @keyframes;

b, the animation sequence is divided into multiple nodes by percent;

C. Define each attribute separately in each node

D, the animation is applied to the corresponding elements through animation;

2 , key attributes

A, Animation-name set the animation sequence name

B, animation-duration animation duration

C, animation-delay animation delay time

D, animation-timing-function animation execution speed, linear, ease, etc.

E, animation-play-state animation playback status, play, paused, etc.

F, animation-direction animation inverse, alternate, etc.

G, Animation-fill-mode Animation after the completion of the state, forwards, backwards, etc.

H, animation-iteration-count animation execution times, inifinate, etc.

Introduction to 2D and 3D conversion knowledge in CSS3

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.