平面转换

目标:可使用transform属性实现元素的位移、旋转、缩放等效果

位移

语法应用

transform: translate(x,y)

取值（正负皆可）
- 像素单位数值（px）
- 百分比（参照物为盒子自身尺寸）
技巧
- transform()只给出一个值，表示x轴方向移动距离
- 单独设置某个方向的移动距离：translateX() & translateY()

代码演练

效果：当鼠标移入父盒子时，子盒子向X轴移动自身宽度、高度的-50%
效果：

HTML代码：

<!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: 300px;
            height: 300px;
            background-color: pink;
            margin: 100px auto;
        }

        .son {
            width: 100px;
            height: 100px;
            background-color: skyblue;
            transition: all .5s;
        }

        .father:hover .son {
            transform: translate(-100%, -100%);
        }
    </style>
</head>

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

拓展

用位移属性使子盒子在父盒子里居中（宽高可改）

效果： HTML代码：

<!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>
        .box {
            position: relative;
            width: 500px;
            height: 500px;
            margin: 100px auto;
            background-color: pink;
        }

        .son {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 200px;
            height: 200px;
            background-color: skyblue;

        }
    </style>
</head>

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

</html>

双开门案例

效果：

HTML代码：

<!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>
        .box {
            width: 1366px;
            height: 600px;
            margin: 50px auto;
            background-image: url(./images/bg.jpg);
            overflow: hidden;
        }

        .box div {
            float: left;
            width: 50%;
            height: 100%;
            transition: all 1s;
            background-image: url(./images/fm.jpg);
        }



        .son1 {
            /* background-image: url(./images/fm.jpg); */
            background-position: right;

        }

        .box:hover .son {
            transform: translate(-100%);

        }

        .box:hover .son1 {
            transform: translate(100%);

        }
    </style>
</head>

<body>
    <div class="box">
        <div class="son"></div>
        <div class="son1"></div>
    </div>
</body>

</html>

旋转

语法应用

transform:rotate(角度)
取值
- 角度单位:deg
技巧：取值为正负值
- 取值为正, 则顺时针旋转
- 取值为负, 则逆时针旋转

代码演练

效果：

HTML代码：

<!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>
      img {
        width: 250px;
        /* 过渡 */
        transition: 2s;
      }

      img:hover {
        /* 顺时针旋转 360deg */
        transform: rotate(360deg);

        /* 逆顺时针旋转 360deg */
        /* transform: rotate(-360deg); */
      }
    </style>
  </head>

  <body>
    <img src="./images/rotate.png" alt="" />
  </body>
</html>

缩放

语法应用

transfrom:scale(x轴缩放的位置,y轴缩放的倍数)
- 当值为1时图片大小不变，为>1时图片放大，<1时则图片缩小
技巧
- 一般情况下，只为scale设置一个值，表示x轴和y轴等比例缩放
- transfrom:scale(缩放倍数);

代码演练

效果：

HTML代码：

<!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>
        .box {
            width: 300px;
            height: 210px;
            margin: 100px auto;
            background-color: pink;
            overflow: hidden;
        }

        .box img {
            width: 100%;
            transition: all .8s;
        }

        .box:hover img {
            transform: scale(1.2);
        }
    </style>
</head>

<body>
    <div class="box"><img src="./images/product.jpg" alt=""></div>
</body>

</html>

转换原点

语法应用

默认原点是盒子中心点
transform:origin:原点水平位置原点垂直位置
取值
- 方位名词（left、top、right、bottom、center）
- 像素单位数值
- 百分比(参照盒子自身尺寸)

代码示例

img {
    width: 100px;
    height: 100px;
    transition: all 1s;
    /* 改变原点 此时围绕着右下旋转 */
    'transform-origin: right bottom;'

}

img:hover {
    transform: rotate(360deg);
}

多重转换

语法应用

采用复合属性写法

transform: 属性值属性值
- ```
transfrom:translate() rotate();
```
多重转换原理
- 旋转会改变网页元素的坐标轴向
- 先写旋转，则后面的转换效果以旋转后的轴向为准，会影响转换结果

代码示例

效果：

HTML代码：

<!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>
        .box {
            width: 800px;
            height: 200px;
            border: 1px solid #000;
        }

        .box img {
            width: 200px;
            transition: all 1s;
        }

        .box:hover img {
            transform: translate(600px) rotate(360deg);
        }
    </style>
</head>

<body>
    <div class="box">
        <img src="./images/tyre1.png
        " alt="">
    </div>
</body>

</html>

知识点-opacity(透明度)

opacity（数值）
当值为1时图片透明度不变，当值为0时完全透明

知识点-perspective(视觉距离)

perspective(距离)
- 建议数值800px-1200px
- 指眼睛到屏幕的距离

preserve-3d

(使盒子处于一个3D空间)

transform-style: preserve-3d;( 添加在所需3d空间的盒子里)

代码示例

<!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>
        .box {
            position: relative;
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 100px auto;
            transform-style: preserve-3d;
            transition: all 2s;
        }

        .box div {
            position: absolute;
            width: 200px;
            height: 200px;

        }

        .son {
            background-color: skyblue;
            transform: translateZ(100px);
        }

        .son1 {
            background-color: red;
        }

        .box:hover {
            transform: rotateX(90deg);
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="son"></div>
        <div class="son1"></div>
    </div>
</body>

</html>

1647144289376

立方体案例(综合)

1 搭建静态结构
- 1 定一个父盒子 box 包装着6个小平面（立方体有6个面）
- 2 写6个面
  - 1 先使用定位来重叠在一起（方便后面一个一个的调整他们的位置构造立方体）
2 使用空间变换来实现立方体！！
- 1 前：z轴正移动 +100px
- 2 后：z轴负移动 -100px 旋转 Y轴正 +180deg
- 3 左：X轴负移动 -100px 旋转 Y轴负 -90deg
- 4 右：X轴正移动 +100px 旋转 Y轴正 +90deg
- 5 上：Y轴负移动 -100px 旋转 X轴负 -90deg
- 6 下：Y轴正移动 +100px 旋转 X轴正 +90deg
3 提前检查一下有效果
- 1 给box 开启立体空间效果-立体呈现 3d呈现（）
- 2 给box 旋转（transform: rotate3d(1, 1, 1, 20deg);)

代码示例

效果：

HTML代码：

<!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>
        ul {
            width: 200px;
            height: 200px;
            list-style: none;
            text-align: center;
            line-height: 200px;
            margin: 200px auto;
            transform-style: preserve-3d;
            position: relative;
            transform: rotate3d(1, 1, 1, 20deg);
        }

        ul li {
            width: 200px;
            height: 200px;
            position: absolute;
        }

        .front {
            background-color: salmon;
            transform: translateZ(100px);

        }

        .back {

            background-color: seagreen;
            transform: translateZ(-100px) rotateY(360deg);
        }

        .left {
            background-color: lawngreen;
            transform: translateX(-100px) rotateY(-90deg);
        }

        .right {
            background-color: yellow;
            transform: translateX(100px) rotateY(90deg);
        }

        .up {
            background-color: aqua;
            transform: translateY(-100px) rotateX(90deg);
        }

        .bottom {
            background-color: red;
            transform: translateY(100px) rotateX(-90deg);
        }
    </style>
</head>
<ul>
    <li class="front">前</li>
    <li class="back">后</li>
    <li class="left">左</li>
    <li class="right">右</li>
    <li class="up">上</li>
    <li class="bottom">下</li>
</ul>
<body>
</body>
</html>

CSS的平面转换+空间转换 （位移、旋转、缩放、立方体）-我的前端笔记整理

平面转换

位移

语法应用

代码演练

拓展

用位移属性使子盒子在父盒子里居中（宽高可改）

双开门案例

旋转

语法应用

代码演练

缩放

语法应用

代码演练

转换原点

语法应用

代码示例

多重转换

语法应用

代码示例

知识点-opacity(透明度)

知识点-perspective(视觉距离)

preserve-3d

代码示例

立方体案例(综合)

代码示例

CSS的平面转换+空间转换（位移、旋转、缩放、立方体）-我的前端笔记整理