This is the 22nd day of my participation in the August Wen Challenge.More challenges in August

Range of transition, the transition

Usually used with hover

• grammar

 div {
     width: 100px;
     height: 100px;
     background-color: red;
     /* add */ to whoever does the transition
     
     /*transition: transition-property transition-duration transition-timing-function transition-delay*/
     /* Transition: The transition attribute takes time. * /
     transition: width 1s ease 1s;
     
     /* If you want to change multiple attributes, separate */ with commas
     transition: width 1s, height 1s;
     
     /* or use all instead of */
     transition: all 1s;
 }
 
 div:hover {
     width: 200px;
 }
Copy the code

• Transition-timing-function

  • At a constant speed linear –
  • Ease — Slow down gradually (default)
  • Ease – in – the acceleration
  • Ease – out – slow down
  • Ease-in-out — speed up and then slow down

2D conversion of CSS

First, the big idea

• CSS3 transformations can be performed on elements in a page:

  • Mobile:translate
  • Rotation:rotate
  • Zoom:scale

• CSS3’s transformation methods all belong to the transform property

Two, small details

01. translate

• Translate (x,y) defines the position to move

  • It can be a specific value, or it can be a percentage (the percentage refers to the width or height of the moving element itself)

  • It could be one number, it could be two numbers

    • A number means that the X and Y coordinates are equal
    • The two numbers represent the X and Y coordinates

  • You can just move the X coordinate or the Y coordinate

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

The translate move does not affect other element positions

Has no effect on inline labels

 div:hover {
     /* Then translate defines the position to which the element is moved */
     transform: translate(100px.100px);
     
     /* can also move the X coordinate, or Y coordinate */
     /* Only the last one will take effect. * /
     /* transform: translateX(100px); * /
     /* transform: translateY(100px); * /
 }
 ​
Copy the code

(1) Percentage application

• The box is centered horizontally and vertically

 /* Percentage application: box horizontally/vertically centered */
 .son {
     /* Absolute position */
     position: absolute;
     width: 100px;
     height: 100px;
     background-color: red;
     /* Position position 50%*/
     top: 50%;
     left: 50%;
 ​
     /* Move half the width and height of the child to the center of the box */
     transform: translate(-50%, -50%);
 }
 ​
Copy the code

02. transform-origin

• Transform-origin :X Y defines the rotation center

  • The default value is 50%
  • Can be set up precise numerical nouns | | azimuth percentage

03. rotate

• Rotate (Angle) Defines element rotation: rotate(45deg)

  • The value is: Number + Angle (DEG)

• You can set the rotation center to transform-origin

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

03. scale

• Scale (x,y) defines element scaling

  • (x,y), put numbers in it, not units, numbers are multiples
  • You can also just set a number
  • Greater than 1 is magnification, less than 1 is shrinking
  • Default center zoom, you can set the zoom center:transform-origin
  • Also can be set up to X | Y zoom

  【 Note 】 Scale does not affect the position of other boxes

 ​
 .box:hover {
     /* Define zoom, width twice, height three times */
     transform: scale(2.3);
 ​
 }
 ​
Copy the code

Three, compound writing (simplified writing)

Translate (X,Y) comes first, along with other attributes

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

3D conversion of CSS

First, the big idea

• Instead of 2D conversion’s (X, Y) planar coordinate axis, 3D conversion has an extra Z axis, which becomes a three-dimensional coordinate axis of (X, Y, Z)

Two, small details

01. perspective

• Perspective is used to define the perspective of 3D transformation elements

  • Define the distance from the observation point to the element. The smaller the value, the closer it is, the more obvious the change will be

    Personal understanding, meaning that the default perspective is equal to zero, meaning that the view point is on the screen surface and the element is as big as it should be

    If distance is set, the point of view moves away from the screen and toward the person, resulting in a situation where the distance is larger than the distance

• It is necessary that the 3D view cannot be observed without setting

• Defined in the parent element (or ancestor element) and applied to the child element (descendant element)

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

02. transform-style

• How are specified elements rendered in three dimensions

  • 2 d rendering:transform-style:flat
  • 3 d rendering:transform-style:preserve-3d

• Defined in the parent element (ancestor element)

  .father {
      /* Add perspective to the parent element */
      perspective: 700px;
      /* 3D rendering, so that the child elements in 3D rotation, maintain 3D space */
      transform-style: preserve-3d;
  }
  Copy the code

03. transform-origin

• transform-origin:X Y ZUsed to define the 3D rotation center
  • X Y ZThe default value is:50% 50% 0
• Can set value: length percentage | | bearing nouns
  • left | center | right — Horizontal value
    • The corresponding hundred score isleft=0% | center=50% | right=100%
  • top | center | bottom — Vertical value
    • The corresponding hundred score istop=0% | center=50% | bottom=100%
• Number of settable values: one value, two values, three values

(1) The case of one value

• If length or percentage is set, it is the value of the X-axis, and the default value of the Y-axis is 50%

• If you set a azimuth noun, what direction is the azimuth noun

• If is horizontal direction: left | right, is for the X axis, then the Y value as the default value: 50% or center;

  • (Only non-x-axis rotation can see the effect)

• If it is perpendicular to the direction of: top | bottom, is for the Y direction, then the X value as the default value: 50% or center;

  • (The effect can only be seen if the rotation is not on the Y axis.)

.son {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 100px auto;
    background-color: red;
    transition: 1s;
    
    transform-origin: left;
    Transform-origin :0 50% 0; * /
    
    /*transform-origin: right; * /
    Transform-origin :100% 50% 0; * /
    
    /*transform-origin: top; * /
    Transform-origin :50% 0 0; * /
    
    /*transform-origin: bottom; * /
    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 the code

(2) The case of three values

• In the case of three values, the third valueZCan only be a length value

04. translate

• translate3d(x,y,z)Define the 3D movement transformation
  • Can be set separately:
    • translateX(100px);
    • translateY(100px);
    • translateZ(100px);
      • 【 note 】 the attribute value can only be the length value, the other two can be a length value | percentage

.father {
    /* Add perspective to the parent element */
    perspective: 700px;
    /* 3D rendering, so that the child elements in 3D rotation, maintain 3D space */
    transform-style: preserve-3d;
}

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

.son:hover {
    /* Then translate defines the position to which the element is moved */
    transform: translate3d(50px.50px.200px);
}
Copy the code

There is a larger effect because moving the Z-axis closer to the screen or point of view makes the element feel larger

05. rotate

• rotate3d(x,y,z,angle)Define element 3D rotation
  • (x,y,z)Is a value between 0 and 1 that describes the rotation of an element around the X-axis.
  • (angle)Is an Angle value that specifies the rotation Angle in 3D space. Positive values are rotated clockwise, whereas elements are rotated inversely.
• Set separately:
  • rotataX(angle)
  • rotataY(angle)
  • rotataZ(angle)

.son:hover {
    /* Then use rotate to define the element rotation Angle */
    /* transform: rotate3d(1, 1, 1, 45deg); * /
    /* transform: rotateX(45deg); * /
    /* transform: rotateY(45deg); * /
    transform: rotateZ(45deg); 
}

Copy the code

06. scale

• Scale3d (x, Y,z) defines 3D scaling transformations

• Set separately:

  • scaleX()

  • scaleY()

  • scaleZ()

.son:hover {
    /* Then use scale to define the element scaling multiple */

    / * the transform: scale3d,1,1 (1); * /
    transform: scaleX(1.5);
    / * the transform: scaleY (1.5); * /
    / * the transform: scaleZ (1.5); * /
    
    /* * scaleZ(1.5) = 0 */ * * scaleZ(1.5) = 0 */
}

Copy the code

Third, other

• Do not write separately when setting the transform; the style will be overwritten

  That’s wrong

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

• Pay attention to the position of the center of rotation as you rotate

CSS animation implementation

Create an animation

• Use @keyframes — keyframes to create animations.

  Use from to define the start state and to to define the end state

   @keyframes move{
       from {
           transform:translate(0.0);
       }
       to{
           transform:translate(100px.100px); }}Copy the code

  Or you can define it as a percentage, 0% for the starting state, 100% for the ending state, and you can add other states in between

   @keyframes move{
       0%{
           transform:translate(0.0);
       }
       50%{
           transform:translate(0.100px);
       100%{
           transform:translate(100px.100px); }}Copy the code

Call animation

• Bind the animation in the element selector to generate the animation

• Specify at least two properties: animation name and animation duration

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

(1) Attribute expansion

 div{
     /* Call animation */
     animation-name: move;
     
     /* Define the transition time, default 0s, therefore must set the transition time */
     animation-duration: 10s;
     
     /* Animation movement curve, default ease */
     /* ease | linear | ease-in | ease-out | stpes(number)*/
     animation-timing-function: ease;
     
     /* Animation delay playback, default 0s */
     animation-delay: 1s;
     
     /* Animation - repeat - times, default 1 times, set infinite times */
     animation-iteration-count: infinite;
     
     /* Whether to play in reverse, default noraml, reverse, forward after alternate, reverse after alternate-reverse*/
     animation-direction: normal;
     
     /* After state, default forwards back to start state, stop at end state forwards */
     animation-fill-mode: forwards;
 ​
     /* compound (simplified) */
     /* Animation: animation name duration motion curve When to start Playback times whether to 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, stop animation paused */
     animation-play-state: paused;
 }
Copy the code

I front-end side dish chicken, if there is wrong, please forgive