CSS3 Foundation (2D/3D)

One, 2D conversion

concept: Is the element in the 2D plane to achieve the move, rotation, scaling, oblique operation is called 2D conversion

1. 语法：transform：值

Value: Move, rotate, scale, bevel

(1 . 1 ) Move

1. transform：translate（）

Parameter description:

(1) in the case of only one value, the horizontal direction of movement, positive value to the right, negative to the left, or percentage, as a percentage refers to its own width, height

(2) two values control both horizontal and vertical

(3) moving does not affect other elements, similar to relative positioning

(4) We can match the transform with the absolute positioning of the box :translate(-50%, -50%) to achieve a box without width height horizontal vertical Center, if there is no width, the maximum width of the box can reach the parent box half.

(5) If you want to move in a single direction you can write TranslateX() and translatey()

( 1. 2) rotation

1. transform：rotate（）

Parameter description:

(1) unit is deg angle

(2) rotation of the whole (including contents inside)

(3 ) positive value clockwise, negative value counterclockwise

(4 ) The center point can control

( 1. 3) Control Center Point

1. transform-origin：值

Value Description:

(1) The value can be an azimuth noun , either a pixel or a percentage (referring to its own height)

( 1. 4) Zoom

1. transform：scale（）

Parameter description:

(1) No units, accept values and decimals

(2) Only one value case, overall zoom (equal scale)

(3) Case of two values, width and height are scaled separately (May deform)

(4) The border is also scaled, and if you want to zoom in one direction, you need to write a 1 in the other direction .

(5) The center point of the zoom can also be controlled

(6) If you want to control a single direction, you can use ScaleX and ScaleY to control

( 1. 5) Oblique cut (S Q Austria)

1. transform：skew（）

Parameter description:

(1) unit is deg

(2) in case of only one value, horizontal chamfering

(3) Two values in the case of horizontal vertical respectively oblique cut

(4) The center point of the oblique cut can also be controlled if it is the X- axis Oblique Center point control up and down if it is the Y - Axis Oblique center point control around

Summarize:

(1) move, skew, enlarge all can control a certain direction by X or Y .

(2) The center point can control rotation, scaling, oblique cutting

(3) If we want multiple 2D effects to coexist, we need to adopt a ligatures approach

(4) When the need to transfrom in different scenes , need to copy the previous existing, to prevent overwriting, and ligatures way to assemble to a transform

(5) Transform conversion effect order as far as possible to maintain unity, if not unified there will be some problems

ii. Transition

first of all, the transition is not an animation, it is a transition from one state of CSS to another in the middle of a state, which we call Transitions

1. transition：值

Value Description:

(1) The attribute requires a transition to write what property can use All to replace all (must write)

(2) The duration of the transition, the unit can be s or ms (must write)
(3) Transition curve default: Ease

(4) When the transition begins

Note:

Css3 Define the new strategy for animation: CSS3 c++ JQ animate CSS3 animate much higher, so but usually some not functional animation, do not need to ensure compatibility, we recommend you use CSS3 to achieve , the animation of the mobile side with the transition to achieve (because the phone's hardware relative to the computer performance is poor, so with c3< Span style= "font-family: Arial" > achieve higher efficiency )

Small Details:display and gradients are not directly generated by the transition ...

: The properties of the transition are best written in full

Three, 3D conversion

( 3. 1)Rotatex

let the elements surround X axis for rotation

(1) positive value pushes to, negative value indicates bowing

(2) 3D without a perspective is not visible

Iv. Other methods of centering the box

Five, down the small arrow

5.1 CSS3 Method making

5.2 Box Border method making

-------to Be Continued

CSS3 Foundation (2D/3D)