This is my participation 8 The fourth of the yuegengwen challenge 22 God , Check out the activity details ：8 Yuegengwen challenge

CSS3 transition ——transition

Usually with hover Use it with

• grammar

 div {
     width: 100px;
     height: 100px;
     background-color: red;
     /* Who makes the transition, who adds  */
     
     /*transition：transition-property transition-duration transition-timing-function transition-delay*/
     /*transition:  Changing attributes   Spend time   Motion curve   When to start ;*/
     transition: width 1s ease 1s;
     
     /* If you want to change multiple properties , You can use commas to separate */
     transition: width 1s, height 1s;
     
     /* Or use  all  Instead of */
     transition: all 1s;
 }
 
 div:hover {
     width: 200px;
 }
 Copy code 

• transition-timing-function Motion curve attribute values ：

  • linear—— uniform
  • ease—— Slow down gradually ( The default value is )
  • ease-in—— Speed up
  • ease-out—— Slow down
  • ease-in-out—— Speed up first, then slow down

---

CSS Of 2D transformation

One 、 Big concept

• CSS3 The transformation can transform the elements in the page ：

  • Move ：translate
  • rotate ：rotate
  • The zoom ：scale

• CSS3 All conversion methods belong to transform attribute

Two 、 Small details

01. translate

• translate(x,y) Define where to move

  • It can be Specific value , It can also be percentage （ Percentage means Move the element itself Width or height of ）

  • It can be a number , It can also be two values

    • A numerical value represents X Coordinates and Y Coordinate equals
    • The two values represent X Coordinates and Y coordinate

  • Or you can just move X Coordinates or Y coordinate

    • translateX(100px);
    • translateY(100px);

translate The movement does not affect the position of other elements

No effect on inline labels

 div:hover {
     /*  And then use translate Define where the element is moved  */
     transform: translate(100px, 100px);
     
     /*  You can also move separately X coordinate , perhaps Y coordinate  */
     /*  But it should be noted that , You can't set... At the same time , Simultaneous setting , Only the last one will take effect ！ */
     /* transform: translateX(100px); */
     /* transform: translateY(100px); */
 }
 ​
 Copy code 

（1） Percentage application

• The box is centered horizontally and vertically

 /*  Percentage application ： The box is horizontal / Vertical center  */
 .son {
     /* Absolute positioning */
     position: absolute;
     width: 100px;
     height: 100px;
     background-color: red;
     /* Positioning position 50%*/
     top: 50%;
     left: 50%;
 ​
     /* Move half the width and height of the child element itself , Reach the center of the box */
     transform: translate(-50%, -50%);
 }
 ​
 Copy code 

02. transform-origin

• transform-origin:X Y Define the center of rotation

  • The default value is ：50% 50%
  • Can be set up Exact value | Position NOUN | percentage

03. rotate

• rotate(angle) Define element rotation ：rotate(45deg)

  • Values for ： Numbers + angle (deg)

• You can set the center of rotation ：transform-origin

 .box {
     /* Define the center of rotation */
     transform-origin: left bottom;
 }
 ​
 .box:hover {
     /* Mouse hover rotation 45 degree */
     transform: rotate(45deg);
 }
 ​
 Copy code 

03. scale

• scale(x,y) Define element scaling

  • (x,y) Write numbers in it , Don 't write units , Numbers refer to multiples
  • You can also set only one number
  • Greater than 1 It's amplification , Less than 1 It's shrinking
  • Default center point scaling , You can set the zoom center ：transform-origin
  • You can also give X|Y Set zoom

  【 Be careful 】scale Scaling does not affect the position of other boxes

 ​
 .box:hover {
     /*  Define scaling , Double the width , High magnification 3 times  */
     transform: scale(2, 3);
 ​
 }
 ​
 Copy code 

3、 ... and 、 Composite writing （ Simplify writing ）

translate(X,Y) Write together with other attributes , Put it first

 div:hover{
     transform:translate(100px) rotate(90deg) scale(1.2);
 }
 Copy code 

---

CSS Of 3D transformation

One 、 Big concept

• Compared with 2D The conversion （X,Y） Plane axis ,3D One more conversion Z Axis , become （X,Y,Z） The three-dimensional axis of

Two 、 Small details

01. perspective

• perspective Used to define 3D Transform the perspective view of the element

  • Define the distance from the observation point to the element , The smaller the value, the closer , Then the more obvious the later changes （ Big ）—— Near and far away

    Personal understanding , Default perspective Is equal to 0 Of , That is, the observation point is on the surface of the screen , The element is as big as it should be

    If the distance is set , The observation point is away from the screen , Move towards people , This will create a situation of near large and far small

• be necessary , Cannot be observed without setting 3D View

• Defined in the parent element （ Or ancestral elements ）, Acting on child elements （ Progeny element ） On

  .father{
      /* The default value is 0*/
      perspective:500px;
  }
   Copy code 

02. transform-style

• Specify how elements are rendered in three-dimensional space

  • 2D present ：transform-style:flat
  • 3D present ：transform-style:preserve-3d

• Defined in the parent element （ Ancestral elements ） in

  .father {
      /*  Add perspective to the parent element  */
      perspective: 700px;
      /* 3D present , Let the child element be in 3D When rotating , keep 3D Three dimensional space  */
      transform-style: preserve-3d;
  }
   Copy code 

03. transform-origin

• transform-origin:X Y Z Used to define 3D Center of rotation
  • X Y Z The default value is ：50% 50% 0
• Settable value ： length | percentage | Position NOUN
  • left | center | right —— Horizontal value
    • The corresponding percentage is left=0% | center=50% | right=100%
  • top | center | bottom —— Value in vertical direction
    • The corresponding percentage is top=0% | center=50% | bottom=100%
• Number of settable values ： A value 、 Two values 、 Three values

（1） The case of a value

• If you set the length value or percentage , Then for X The value of the shaft ,Y The axis is the default 50%

• If you set a location NOUN , Then observe the direction of the noun

• If it's horizontal : left | right, Then for X In the direction of the axis , that Y Value is the default ：50% perhaps center ;

  • （ At this time, only non X Rotate the axis to see the effect ）

• If it's vertical : top | bottom, Then for Y In the direction of the axis , that X Value is the default ：50% perhaps center ;

  • （ At this time, only non Y Rotate the axis to see the effect ）

.son {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 100px auto;
    background-color: red;
    transition: 1s;
    
    transform-origin: left;
    /* It's actually equivalent to transform-origin:0 50% 0;*/
    
    /*transform-origin: right;*/
    /* It's actually equivalent to transform-origin:100% 50% 0;*/
    
    /*transform-origin: top;*/
    /* It's actually equivalent to transform-origin:50% 0 0;*/
    
    /*transform-origin: bottom;*/
    /* It's actually equivalent to transform-origin:50% 100% 0;*/
}

.point {
    position: absolute;
    top: 50%;
    left: 0;
    width: 20px;
    height: 20px;
    background-color: #00f;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.son:hover {
    /* transform: rotateX(45deg); */
    transform: rotateY(45deg);
    /* transform: rotateZ(45deg); */
}
 Copy code 

（2） The case of three values

• In the case of three values , Third values Z Can only be length values

04. translate

• translate3d(x,y,z) Definition 3D Mobile conversion
  • It can be set separately ：
    • translateX(100px);
    • translateY(100px);
    • translateZ(100px);
      • 【 Be careful 】 This property value can only be a length value , The other two can be Length value | percentage

.father {
    /*  Add perspective to the parent element  */
    perspective: 700px;
    /* 3D present , Let the child element be in 3D When rotating , keep 3D Three dimensional space  */
    transform-style: preserve-3d;
}

.son {
    width: 100px;
    height: 100px;
    margin: 0 auto;
    background-color: red;
    transition: 1s;
}

.son:hover {
    /*  And then use translate Define where the element is moved  */
    transform: translate3d(50px, 50px, 200px);
}
 Copy code 

It has a bigger effect , This is because of the movement Z Axis position , Closer to the screen or observation point , Then the element becomes larger in the sense

05. rotate

• rotate3d(x,y,z,angle) Define the element 3D rotate
  • (x,y,z) It's a 0 To １ Value between , It is mainly used to describe the elements around X The vector value of the axis rotation .
  • (angle) It's an angle value , Specified in the 3D Space rotation angle , Positive clockwise rotation , On the contrary, when the element is inverse .
• Set separately ：
  • rotataX(angle)
  • rotataY(angle)
  • rotataZ(angle)

.son:hover {
    /*  And then use rotate Defines the rotation angle of the element  */
    /* transform: rotate3d(1, 1, 1, 45deg); */
    /* transform: rotateX(45deg); */
    /* transform: rotateY(45deg); */
    transform: rotateZ(45deg); 
}

 Copy code 

06. scale

• scale3d(x,y,z) Definition 3D Scaling transformation

• Set separately ：

  • scaleX()

  • scaleY()

  • scaleZ()

.son:hover {
    /*  And then use scale Defines the element scaling factor  */

    /* transform: scale3d(1,1,1); */
    transform: scaleX(1.5);
    /* transform: scaleY(1.5); */
    /* transform: scaleZ(1.5); */
    
    /* 【 notes 】 here scaleZ(1.5) There is no effect , Because it is Z Enlarged in the axial direction , and Z The length on the shaft is 0, So I can't see the effect  */
}

 Copy code 

3、 ... and 、 Other

• Set up transform Don't write separately , The style will be overwritten

  That is, it is wrong

  div{
  	trandform:translateX(50%);
  	transform:rotate(45deg);
  }
   Copy code 

• When rotating, pay attention to the position of the rotation center

---

CSS Animation implementation of

One 、 Create animation

• Use @keyframes—— Keyframes , Create animation .

  use from Define start state , use to Define the end state

   @keyframes move{
       from {
           transform:translate(0,0);
       }
       to{
           transform:translate(100px,100px);
       }
   }
   Copy code 

  Or define it as a percentage ,0% Define the starting state ,100% Define the end state , Other states can be added in the middle

   @keyframes move{
       0%{
           transform:translate(0,0);
       }
       50%{
           transform:translate(0,100px);
       100%{
           transform:translate(100px,100px);
       }
   }
   Copy code 

Two 、 Call animation

• Bind the animation in the element selector where you want to generate the animation

• At least Specify these two properties ： The name of the animation 、 Animation duration

   div{
       animation-name:move;
       animation-duration:3s;
       /* Simplify writing */
       animation:move 3s;
       /* compatible */
       -webkit-animation:move 3s;
   }
   Copy code 

（1） Attribute expansion

 div{
     /* Call animation  */
     animation-name: move;
     
     /*  Define transition time , Default 0s, Therefore, the transition time must be set  */
     animation-duration: 10s;
     
     /*  Animation motion curve , Default ease */
     /* ease | linear | ease-in | ease-out | stpes(number)*/
     animation-timing-function: ease;
     
     /*  Animation delay , Default 0s */
     animation-delay: 1s;
     
     /*  Animation - repeat - frequency , Default 1 Time , Set up infinite Infinite times  */
     animation-iteration-count: infinite;
     
     /*  Whether to play in the opposite direction , Default noraml, Reverse play reverse, First positive and then negative alternate, Reverse first and then positive alternate-reverse*/
     animation-direction: normal;
     
     /*  After the end of the State , Default backwards  Return to the starting state , Stop at the end forwards */
     animation-fill-mode: forwards;
 ​
     /*  Composite writing （ Simplify writing ） */
     /* animation:  The name of the animation   The duration of the   Motion curve   When to start   plays   Whether it's reverse   Animation start or end state  */
     /*  The above can be written as ： */
      animation: move 10s ease 1s infinite normal forwards; 
 }
 ​
 div:hover {
     /*  Animation running state , Default running function , The mouse passes and stops the animation paused */
     animation-play-state: paused;
 }
 Copy code 

---

I like chicken with vegetables , If not, please forgive me