HTML--day03

1. installed for transform

1.1 mobile two-dimensional plane

grammar:

transform: translateX (moving distance) translateY, (moving distance);

Transform: translate (horizontal movement distance, the vertical moving distance)

May be negative values, positive values are moved to the right level, the value is moved downward vertical

1.2 two-dimensional plane of rotation

grammar:

Transform:rotate(30deg);

Origin of the rotation settings

transform-origin: center (default)

You can set left, top, right, bottom, center,

Percentage setting: transform-origin: Percentage of the vertical position of the horizontal position

1.3 3D perspective view point conversion

Perspective point disposed on the parent element or elements to see the ancestor element is

Syntax: perspective: 1000px;

1.4 three-dimensional movement

grammar:

transform: translateZ(200px);

transform: translate3d (horizontal movement, vertical movement, z-axis movement);

z axis: perpendicular to the z-axis to the screen, the direction is toward us.

1.5 Three-dimensional rotation

grammar:

/*transform: rotateX(30deg);*/

/*transform: rotateY(30deg);*/

/*transform: rotateZ(30deg);*/

transform: rotate3d(1,1,1,30deg);

Analytical: rotate3d (x, y, z, 30deg), by x, y, z to create a vector with the origin of the coordinate toward the (x, y, z), use this vector as the rotation axis.

1.6 Zoom

grammar:

transform: scale (overall amplification factor)

Transform: scale (multiple horizontal scaling, vertical scaling factor)

1.7 tilt

Syntax: transform: skew (15deg, 0deg);

Tip: If you must first dial positive, the reverse tilt can be

2.Transition transition

Comprehensive settings:

transition: all 2s;

Are provided:

/ * Transition effects * / 
/ * Transition: height 2S, Transform 3S, background 2S; * / 
/ * Transition: All 2S Linear; * / 
/ * transition attribute * / 
Transition-Property: All; 
/ * transition consumed time * / 
transition-DURATION: 2S; 
/ * velocity change transition 
 linear linear velocity 
 EASE / EASE-in / EASE-OUT 
 Cubic Bezier-(0.57, -0.34, 0.37, 1.44) 
 * * / 
transition-Timing-function: Cubic -bezier (0.57, -0.34, 0.37, 1.44); 
/ * transition delay time * / 
/ *-transition delay: 2S; * /

3.Animation animation

Comprehensive set of syntax: animation: donghua 4s infinite;

Are provided:

/ * Animation * / 
/ * Animation: Donghua 5S; * / 
/ * name of the animation * / 
Animation-name: Donghua; 
/ * first time the animation takes * / 
Animation-DURATION: 3S; 
/ * speed of the animation * / 
animation-Timing-function: Linear; 
/ * animation delay time * / 
animation-delay: 3S; 
/ * number of animated * / 
animation-Iteration-COUNT:. 3; 
/ * set the animation round * / 
animation-direction: Alternate ; 
/ * last minute retention state * / 
Animation-Fill-MODE: Forwards;

Written in different states keyframe

@keyframes donghua{
                0%{
                    transform: translate(0,0);
                }
                50%{
                    transform: translate(500px,0);
                }
                100%{
                    transform: translate(500px,500px);
                }
            }

1.4 Elastic layout

Elastic container:

Set on the elements of the display: flex; element is the elastic container

Elastic sub-elements:

Elements provided on the display: flex; element is an elastic element inside the container is elastically direct child sub-elements.

Syntax: display: flex;

Spindle distribution settings:

Content-The justify: 
 Flex-Start 
 Flex-End 
 Center 
 Space-around: equally distributed on both sides of the pitch, the pitch on both sides of the middle half of 
 space-between: evenly distributed on both sides with no gaps between 
 space-evenly: evenly distributed, the same pitch

Distribution side shaft is provided:

stretch: stretching, default settings will not stretch to the height of a child element of the parent element with the same height. Set height has no effect 
 Flex-Start 
 Flex-End 
 Center

Wrap:

Syntax: flex-warp: warp

Multi-line distribution settings:

Content-align = left: 
 Flex-Start 
 Flex-End 
 Center 
 Space-around: equally distributed on both sides of the pitch, the pitch on both sides of the middle half of 
 space-between: evenly distributed on both sides with no gaps between 
 space-evenly: evenly distributed, the same pitch

The remaining space is occupied by:

Syntax: Flex: digital;

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            .parent{
                width: 100%;
                height: 800px;
                margin: 0 auto;
                border: 1px solid #000;
                
                
                /*设置弹性容器*/
                the display : Flex ; 
                
            } 
                
            .db { 
                Flex : 1 ; 
                background : Yellow ; 
            } 
            .c1 { 
                / * occupy the remaining space parts 1 * / 
                Flex : 2 ; 
                background : Green ; 
            } 
            
            .c2 { 
                background : Purple ; 
                width : 100px ; 
            } 
            
            
        </ style> 
    </ Head > 
    < body > 
        < div class = "parent" > 
            <-! DB 3 parts 1 part occupies the remaining space in the -> 
            < div class = "DB" > </ div > 
            <-! C1 is the main content, the remaining to occupy the remaining space in the parts 3 parts 2 -> 
            < div class = "Child C1" > </ div > 
            <-! assumed c2 advertising, accounting 100px width -> 
            < div class = "Child c2" > </ div > 
            
        </ div > 
    </body>
</html>

Sort of elastic sub-elements:

Syntax: order: Digital

According to the figures of the order, from small to large order

Guess you like