A, rotate

2D rotation refers to rotating elements clockwise or counterclockwise in a 2-dimensional plane

Use steps:

  1. Add transformation attributes to the elementtransform
  2. Attribute values forThe rotate (perspective) 如 transform:rotate(30deg)Rotate clockwise30 degrees
div{
      transform: rotate(0deg);
}
Copy the code

Second, the triangle

  • Code demo
 <style>
        div {
            position: relative;
            width: 249px;
            height: 35px;
            border: 1px solid # 000;
        }
        
        div::after {
            content: "";
            position: absolute;
            top: 8px;
            right: 15px;
            width: 10px;
            height: 10px;
            border-right: 1px solid # 000;
            border-bottom: 1px solid # 000;
            transform: rotate(45deg);
            transition: all 0.2 s;
        }
        /* Hover over the triangle inside the div */
        
        div:hover::after {
            transform: rotate(225deg);
        }
    </style>
</head>

<body>
    <div></div>
</body>
Copy the code

Set element rotation center (transform-origin)

  1. Transform-origin Basic syntax

    transform-origin: x y;
Copy the code

  2. Important knowledge points

    • Note that the following arguments x and y are separated by Spaces
    • The center of the default rotation of x and y is the center of the element (50% 50%), equivalent tocenter center
    • You can also set pixels or azimuth nouns for x and y.top,bottom,left,right,center)

3. Case of rotating center

  • Code demo
<style>
        div {
            overflow: hidden;
            width: 200px;
            height: 200px;
            border: 1px solid pink;
            margin: 10px;
            float: left;
        }
        
        div::before {
            content: "";
            display: block;
            width: 100%;
            height: 100%;
            background-color: hotpink;
            transform: rotate(180deg);
            transform-origin: left bottom;
            transition: all 0.4 s;
        }
        /* Hover over before in div */
        
        div:hover::before {
            transform: rotate(0deg);
        }
    </style>
</head>

<body>
    <div></div>
    <div></div>
    <div></div>
</body>
Copy the code

4. Scale of 2D conversion

  1. The role of the scale

    • Used to control the zoom in and out of elements

  2. grammar

    transform: scale(x, y)
Copy the code

  3. Knowledge points

    • Notice that x and y are separated by commas
    • transform: scale(1, 1): Double the width and height, equivalent to no amplification
    • transform: scale(2, 2)The width and height have been enlarged by twice
    • transform: scale(2)If only one argument is written, the second argument is the same as the first argument
    • The transform: scale (0.5, 0.5): to reduce the
    • scaleBiggest advantage: You can set the conversion center zoom, default to center zoom, and does not affect other boxes

  4. Code demo

       div:hover {
	   /* Note that the number is a multiple, so there is no need to add units */
	   /* transform: scale(2, 2) */
   
	   /* To achieve equal scale, modify width and height */
	   /* transform: scale(2) */
   
	   /* less than 1 is equal to scaling */
	   transform: scale(0.5.0.5)}Copy the code

Five, picture enlargement case

  • Code demo
<style>
        div {
            overflow: hidden;
            float: left;
            margin: 10px;
        }
        
        div img {
            transition: all .4s;
        }
        
        div img:hover {
            transform: scale(1.1);
        }
    </style>
</head>

<body>
    <div>
        <a href="#"><img src="media/scale.jpg" alt=""></a>
    </div>
    <div>
        <a href="#"><img src="media/scale.jpg" alt=""></a>
    </div>
    <div>
        <a href="#"><img src="media/scale.jpg" alt=""></a>
    </div>
</body>
Copy the code

Six, the page button case

  • Code demo
<style>
        li {
            float: left;
            width: 30px;
            height: 30px;
            border: 1px solid pink;
            margin: 10px;
            text-align: center;
            line-height: 30px;
            list-style: none;
            border-radius: 50%;
            cursor: pointer;
            transition: all .4s;
        }
        
        li:hover {
            transform: scale(1.2);
        }
    </style>
</head>

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
    </ul>
</body>
Copy the code

7. Comprehensive writing method and sequence of 2D transformation

  1. Knowledge points

    • Multiple conversions are used at the same time in the formattransform: translate() rotate() scale()
    • The order will affect the effect of the transformation (rotation first will change the axis orientation)
    • But when we also have position or other properties, we want to put displacement first

  2. Code demo

    div:hover {
  transform: translate(200px.0) rotate(360deg) scale(1.2)}Copy the code

8. Animation

  1. What is animation

    • Animation isCSS3One of the most subversive features is that multiple nodes can be set to precisely control one or a group of animations to achieve complex animation effects

  2. Basic use of animation

    • Let’s define the animation
    • Call the defined animation

  3. Syntax format (define animation)

    @keyframesAnimation name {0% {
        width: 100px;
    }
    100% {
        width: 200px}}Copy the code

  4. Syntax format (using animation)

    Div {/* Call animation */ animation-name: animation name; /* duration */ animation-duration: duration; }Copy the code

  5. The animation sequence

    • 0% is the beginning of the animation, 100% is the completion of the animation, such a rule is the animation sequence
    • Specifying a CSS style in @keyframs will create an animation of the new style instead of the current style
    • Animation is the effect of gradually changing elements from one style to another, changing as many styles as you want as many times as you want
    • Use a percentage to specify when the change occurredfrom 和 toIs equal to 0% and 100%

  6. Code demo

    <style>
    div {
      width: 100px;
      height: 100px;
      background-color: aquamarine;
      animation-name: move;
      animation-duration: 0.5 s;
    }

    @keyframes move{
      0% {
        transform: translate(0px)}100% {
        transform: translate(500px.0)
      }
    }
  </style>
Copy the code

Animation sequence

  • Code demo
  <style>
        /* from to is equivalent to 0% and 100% */
        /* @keyframes move { from { transform: translate(0, 0); } to { transform: translate(1000px, 0); }} * /
        /* Animation sequence */
        /* 1. Multiple state changes can be made keyFrame */
        /* 2. The percentage inside is an integer */
        /* 3. The percentage inside is the division of the total time (in our case 10s) 25% * 10 = 2.5s */
        
        @keyframes move {
            0% {
                transform: translate(0.0);
            }
            25% {
                transform: translate(1000px.0)}50% {
                transform: translate(1000px.500px);
            }
            75% {
                transform: translate(0.500px);
            }
            100% {
                transform: translate(0.0); }}div {
            width: 100px;
            height: 100px;
            background-color: pink;
            animation-name: move;
            animation-duration: 10s;
        }
    </style>
</head>

<body>
    <div>

    </div>
</body>
Copy the code

10. Common attributes of animation

  1. Common attributes

  1. Code demo

    div {
  width: 100px;
  height: 100px;
  background-color: aquamarine;
  /* Animation name */
  animation-name: move;
  /* Animation takes time */
  animation-duration: 2s;
  /* Animation speed curve */
  animation-timing-function: ease-in-out;
  /* How long does the animation wait for execution */
  animation-delay: 2s;
  /* Specifies an infinite number of animations */
  animation-iteration-count: infinite;
  /* Whether to play backwards */
  animation-direction: alternate;
  /* State after animation */
  animation-fill-mode: forwards;
}

div:hover {
  /* Specifies whether the animation is paused or played */
  animation-play-state: paused;
}
Copy the code

Eleven, animation shorthand

  1. Short for animation

    /* Animation: animation name duration motion curve When to start playback times whether to reverse the start and end state */
animation: name duration timing-function delay iteration-count direction fill-mode
Copy the code

  2. Knowledge points

    • The shorthand property does not containanimation-paly-state
    • Suspended animationanimation-paly-state: paused; Often used in conjunction with other mouse passes
    • To animate back instead of switching back:animation-direction: alternate
    • After the box animation ends, stop at the end position:animation-fill-mode: forwards

  3. Code demo

    animation: move 2s linear 1s infinite alternate forwards;
Copy the code

Details of velocity curves

  1. Details of velocity curve
    • animation-timing-function: Specifies the animation speed curve, default isease

  1. Code demo

    div {
  width: 0px;
  height: 50px;
  line-height: 50px;
  white-space: nowrap;
  overflow: hidden;
  background-color: aquamarine;
  animation: move 4s steps(24) forwards;
}

@keyframes move {
  0% {
    width: 0px;
  }

  100% {
    width: 480px; }}Copy the code

13. The case of the running polar bear

  1. Code demo
<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            background-color: #ccc;
        }      
        div {
            position: absolute;
            width: 200px;
            height: 100px;
            background: url(media/bear.png) no-repeat;
            /* We can add multiple animations to the element, separated by commas */
            animation: bear .4s steps(8) infinite, move 3s forwards;
        }
        
        @keyframes bear {
            0% {
                background-position: 0 0;
            }
            100% {
                background-position: -1600px 0; }}@keyframes move {
            0% {
                left: 0;
            }
            100% {
                left: 50%;
                /* margin-left: -100px; * /
                transform: translateX(-50%); }}</style>
</head>

<body>
    <div></div>
</body>

</html>
Copy the code