use of transform

Goal: Use the transform property to achieve effects such as displacement, rotation, and scaling of elements.

plane transformation

Change the shape of the box in the plane (displace, rotate, scale)
2D conversion

displacement

Syntax
Use translate to achieve element displacement effect
transform: translate(horizontal movement distance, vertical movement distance);
Value (both positive and negative)
pixel unit value
percentage (the reference object is the size of the box itself )

Requirement:
When the mouse moves into the outer big box, the inner pink box moves:

insert image description here

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>位移-基本使用</title>
    <style>
        .father {
    
    
            width: 500px;
            height: 300px;
            margin: 100px auto;
            border: 1px solid #000;
        }
        
        .son {
    
    
            width: 200px;
            height: 100px;
            background-color: pink;
            // 过度效果
            transition: all 0.5s;
        }
    
        /* 鼠标移入到父盒子，son改变位置 */
        .father:hover .son {
    
    
            /* transform: translate(100px, 50px); */

            /* 百分比: 盒子自身尺寸的百分比 */
            /* transform: translate(100%, 50%); */

            /* transform: translate(-100%, 50%); */

            /* 只给出一个值表示x轴移动距离 */
            /* transform: translate(100px); */
			  /* 向下移动100px */
            transform: translateY(100px);
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

</html>

Example: Displacement - achieve absolute positioning and centering

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绝对定位元素居中效果</title>
    <style>
        .father {
    
    
            position: relative;
            width: 500px;
            height: 300px;
            margin: 100px auto;
            border: 1px solid #000;
        }
        
        .son {
    
    
            position: absolute;
            // 使用left和top是相当于左上角而言，效果偏右下角的。
            left: 50%;
            top: 50%;
            /* margin-left: -100px;
            margin-top: -50px; */
				
            transform: translate(-50%, -50%);//与盒子的尺寸无关

            width: 203px;
            height: 100px;
            background-color: pink;          
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>

insert image description here

Guess you like