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