CSS3-2D conversion

CSS3-2D conversion

2D transformation transform can realize the effects of element displacement (translate), rotation (rotate), zoom (scale), etc.

1. Displacement

   Transform:translate(x,y) is written together
   transform:translateX(n) is written separately
   transform:translateY(n) is written separately
   If the unit of the parameter is a percentage, the box and height and width are used as the reference point, or px is the unit.
   Advantages: Will not affect other elements.
   Disadvantages: No effect on inline labels.

img {
            width: 200px;
            height: 130px;
        }
        
        ul {
            float: left;
            list-style: none;
        }
        
        ul li {
            float: left;
            padding-left: 10px;
        }
        
        ul li:hover {
            transform: translate(0, -5px);
 }
 <div>
        <ul>
            <li><img src="1.jpg"></li>
            <li><img src="2.jpg"></li>
            <li><img src="3.jpg"></li>
            <li><img src="4.jpg"></li>
        </ul>
</div>

The above code realizes that the mouse is moved to the li element, and the element moves 5px in the X direction

2. Rotation
   transform: rotate (degree + deg) when the
   angle is positive, rotate clockwise. When the
   angle is negative, rotate counterclockwise. The
   default rotation center point is the center point of the element

 div {
            width: 300px;
            height: 300px;
            background-color: pink;
            border-radius: 40%;
            transition: all .5s;
        }
 div:hover {
            transform: rotate(45deg);
}
<div></div>

The above code realizes that the mouse is moved to the div element and the element is rotated clockwise by 45°

3. Zoom

transform:scale(x,y)
1 is 1 times, 2 is 2 times
0.5 is 0.5 times
Advantages:
1. It will not affect other boxes
2. You can set the moving center point

div {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 100px auto;
        }
div:hover {
            transform: scale(2, 2);
 }
 <div></div>

The above code realizes double the width and height of the div when the mouse is moved to the div