18-2D平面转换位移语法 transform: translate(水平移动距离,垂直移动距离); 取值（正或负）

位移

语法
- transform: translate(水平移动距离,垂直移动距离);
取值（正或负）
- 像素单位（px）
- 百分比（%）
x轴正向为右，y轴正向为下
translate()如果只给一个值，表示x轴方向移动距离
单独设置某个方向的移动距离：translateX() & translateY()

在这里插入图片描述

效果图

在这里插入图片描述

源码

<!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>Document</title>
    <style>
        .father {
            width: 500px;
            height: 300px;
            border: 1px solid black;
            margin: 100px auto;
        }
        .son {
            width: 200px;
            height: 100px;
            background-color: pink;
            transition: all 0.5s;
        }
        .father:hover .son {
            transform: translate(100px,50px);
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>

定位盒子居中

使用 translate 快速实现绝对定位的元素居中效果
transform: translate(-50%,-50%);

在这里插入图片描述

<!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>Document</title>
    <style>
        .father {
            position: relative;
            width: 500px;
            height: 300px;
            border: 1px solid black;
            margin: 100px auto;
        }
        .son {
            position: absolute;
            transform: translate(-50%,-50%);
            left: 50%;
            top: 50%;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>

旋转

语法
- transform: rotate(角度)
- 角度单位deg
- transform: rotate(360deg)；
- 取正负值均可

在这里插入图片描述

<!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>Document</title>
    <style>
        img {
            width: 200px;
            /* 设置过渡才会有效果 */
            transition:   all  2s;
        }
        img:hover {
            transform: rotate(360deg);
        }
    </style>
</head>
<body>
    <img src="../image/fc.png" alt="">
</body>
</html>

改变旋转方位原点

默认原点是盒子中心点
语法
- transform-origin: 原点水平位置原点垂直位置;
取值
- 方位名词（left、top、right、bottom、center）
- 像素单位数值
- 百分比

在这里插入图片描述

<!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>Document</title>
    <style>
        img {
            width: 200px;
            /* 设置过渡才会有效果 */
            transition:   all  2s;
            transform-origin: right bottom;
        }
        img:hover {
            transform: rotate(360deg);
        }
    </style>
</head>
<body>
    <img src="../image/fc.png" alt="">
</body>
</html>

多重转换

使用 transform 复合属性实现多形态转换
水平位移600px 旋转360度 transform: translate(600px) rotate(360deg);
车轮会水平边移动边旋转，gif动图太大上传不了

css部分

<style>
        .box {
            width: 800px;
            height: 200px;
            border: 1px solid #000;
        }
        img {
            width: 200px;
            transition: all 8s;
        }
        .box:hover img {
            /* 边走边转 */
            transform: translate(600px) rotate(360deg);
        }
</style>

html部分

</head>
<body>
    <div class="box">
        <img src="../image/tyre.png" alt="">
    </div>
</body>
</html>

缩放图片

使用 scale 改变元素尺寸
语法
- transform:scale(x轴缩放倍数，y轴缩放倍数)
一般情况下，只为scale设置一个值表示x轴和y轴等比例缩放
- transform:scale(缩放倍数（大于1放大，小于1缩小）)

在这里插入图片描述

css部分

<style>
        .box {
            width: 300px;
            height: 300px;
            margin: 100px auto;
            
        }
        img {
            width: 100%;
            transition: all 0.5s;
        }
        .box:hover img {
            transform: scale(1.2);
        }
</style>

html部分

<div class="box">
        <img src="../image/1.jpg" alt="">
</div>