CSS3 03. 3D transformations, coordinate systems, pivot perspective, TRANSFORMZ, transform-style add 3D effects, visible back of backface-visibility elements, animated animation, @keyfarmes, multi-column layouts

Source: Internet
Author: User

1 , 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

CSS 3D in coordinate system

The 3D coordinate system in CSS3 is somewhat different from the 3D coordinate system described above, which is equivalent to 180 degrees of rotation around the x-axis, as

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 .

Perspective perspective

perspective:400px;

The computer display is a 2D plane, the image has three-dimensional (3D effect), in fact, is only a visual rendering, through the perspective can achieve this purpose.

Perspective can be a 2D plane, in the process of conversion, rendering 3D effect.

Note: Not all cases require a perspective effect and are set according to development needs.

Perspective There are two ways of writing

A) as a property, set to the parent element for all 3D transformations of the child element

b) As a value of the Transform property, for the element itself

Transform:translatez (50px)

Moving along the z axis, you need to add perspective perspective:number to the parent box;

http://mingm.cn/demo/09-html+css3/25-css3-The third day/01-3d transform/06-3d-translatez.html

http://mingm.cn/demo/09-html+css3/25-css3-The third day/01-3d transform/ppp.html

3D Rendering Transform-style:3d

Add to the parent box, so that the child box has a true 3d effect

Specifies that child elements are positioned in 3d space

Flat: Default value, flattened

Backface-visibility:hidden; Sets whether a pseudo-element is visible on the back of an element gets a custom property: Content:attr (custom property name)

http://mingm.cn/demo/09-html+css3/25-css3-Third Day/01-3d transform/Case/03-Invert text-practice. HTML

Animation

  

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: Constant speed/ease: deceleration/ease-in: Acceleration/ease-out: Deceleration/ease-in-out: Accelerate and decelerate first

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

F, animation-direction animation inverse, alternate reverse normal

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

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

I, steps (60) means the animation is divided into 60 steps.

If all attributes require transitions: transition-property:all;

The order of the parameter values:

With respect to several values, in addition to the name, animation time, delay has strict order requirements other casual

http://mingm/demo/09-html+css3/25-css3-The third day/02-animation/Case/fishes/02-testfish.html

http://mingm.cn/demo/09-html+css3/25-css3-The third day/02-animation/Case/fishes/01-fish01.html

Case:

Sea waves

http://mingm.cn/demo/09-html+css3/25-css3-The third day/02-animation/Case/sea waves/index.html

http://mingm.cn/demo/09-html+css3/25-css3-The third day/02-animation/Case/Dynamic progress bar/index.html

http://mingm.cn/demo/09-html+css3/25-css3-The third day/02-animation/Case/Dynamic progress bar/index.html

http://mingm.cn/demo/09-html+css3/25-css3-The third day/02-animation/Case/Full Screen toggle/01-full Screen switch exercise. HTML

http://mingm.cn/demo/09-html+css3/25-css3-The third day/02-animation/Case/beating heart/index.html

http://mingm.cn/demo/09-html+css3/25-css3-The third day/02-animation/Case/seamless scrolling/01-seamless scrolling-practice. HTML

http://mingm.cn/demo/09-html+css3/25-css3-The third day/02-animation/Case/Universe/index.html

http://mingm.cn/demo/09-html+css3/25-css3-The third day/02-animation/case/Clock/index.html

Multi-column Layouts

Column-count:number

  Number is divided into several columns;

Chrome does not support

column-rule:1px dashed red; Split Line

column-gap:30px; spacing between columns

Colume-width: Column width

Column-span:all/none for <H1> labels, headings across columns or not across columns

http://mingm/demo/09-html+css3/25-css3-The third day/03-multi-column layouts/01%20 multi-column layouts. htmlmingm/demo/09-html+css3/25-css3-The third day/03-multi-column layouts/ 1% 20 multi-column layouts. html

CSS3 03. 3D transformations, coordinate systems, pivot perspective, TRANSFORMZ, transform-style add 3D effects, visible back of backface-visibility elements, animated animation, @keyfarmes, multi-column layouts

Related Article

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.