The html tag box picture keeps rotating html+css

Title: Sometimes we define a div box or picture or other tags and want to keep it rotating.

effect:

In fact, it will always rotate, so I won’t play the moving picture, and put a static picture to pretend.

achieve:

1. For example: define a div:

  <div></div>

2. Give the box style (length, width and background image are defined):

 div{
            width: 200px;
            height: 200px;
            background-image: url("disc.png");
            background-size: 100% 100%;
        }

3. css add animation-direction attribute;

div{
            width: 200px;
            height: 200px;
            background-image: url("disc.png");
            background-size: 100% 100%;

            animation: move 5s linear infinite;
        }

        @keyframes move{
             
             0%{
                 transform: rotate(0deg);
             }
             100%{
                 transform: rotate(360deg);
             }
        }

Note: The 5s above defines that one revolution is 5 seconds, which can be other seconds.

Extension: Rotating 3D cube album: 3D stereo album : https://blog.csdn.net/luo1831251387/article/details/111032274