二十二、CSS3 之使用平面转换及渐变背景丰富网页效果和呈现方式（2）

平面转换 transform 是 2D 转换，可以改变盒子在平面内的形态，如位移、旋转、缩放

平面转换是根据下面的 坐标轴 来移动或旋转的：

平面转换 - 位移

位移语法：transform:translate(水平移动距离,垂直移动距离)

移动距离 的取值可以是正数，也可以是负数；可以直接用 像素单位数值 表示，也可以用 百分比 来表示，百分比的参照物是盒子的 自身大小

在上述坐标轴中，X 轴正向为右，Y 轴正向为下

关于 translate 的值 ，如果只有一个值，则表示 X 轴 方向移动的距离

也可以给某个方向设置单独移动的距离，水平移动距离可以用 translateX() ；垂直移动距离可以用 translateY() 来表示

示例：鼠标移入父盒子，子盒子改变位置

HTML 复制代码

    <style>
      .fa {
        width: 200px;
        height: 200px;
        background-color: rgb(215, 215, 254);
      }
      .so {
        width: 100px;
        height: 100px;
        background-color: rgb(249, 254, 215);
      }
      .fa:hover .so{
        transform: translate(50px,30px);
      }
    </style>

  <body>
    <div class="fa">
      <div class="so"></div>
    </div>
  </body>

在需要 盒子居中 项目中，通常使用 百分比 ，因为如果盒子大小改变，不用去修改移动距离，浏览器会根据设置的距离的百分数，自动调整

子绝父相配合移动实现子元素居中

能实现子元素居中效果，但是不易维护：

升级版方案：

下面是一个双开门的小例子，仅供娱乐

用两张图片，配合 CSS 做一个双开门效果：

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>
    <link rel="stylesheet" href="./iconfont/iconfont.css" />
    <style>
      .box {
        margin: 0 auto;
        width: 520px;
        height: 412px;
        background-image: url(./01.png);
        background-repeat: no-repeat;
      }
      .box::before,
      .box::after {
        content: '';
        float: left;
        background-image: url(./02.png);
        background-repeat: no-repeat;
        width: 50%;
        height: 412px;
      }
      .box::after {
        background-position: right 0;
      }
      .box:hover::before{
        transform: translate(-100%);
      }
      .box:hover::after{
        transform: translate(100%);
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

平面转换 - 旋转

平面 旋转 rotate(角度) ，角度的单位是 deg；如果取值为正，顺时针 旋转，取值为负，则 逆时针 旋转

HTML 复制代码

    <style>
      .box {
        margin: 0 auto;
        width: 520px;
        height: 412px;
        transform: rotate(90deg); 
      }
    </style>

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

转换原点

转换原点语法： transform-origin:原点水平位置原点垂直位置

它的取值有三种：

方位名词：left、top、right、bottom、center
像素单位数值
百分比：参照盒子自身尺寸计算

可以参照时钟记忆：

以右下角为原点，顺时针旋转 60°：

HTML 复制代码

    <style>
      .box {
        margin: 0 auto;
        width: 300px;
        height: 300px;
        background-color: lightblue;
      }
      .so {
        width: 100px;
        height: 100px;
        background-color: yellow;
        transform-origin: right bottom;
        transform: rotate(60deg);
      }
    </style>

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

多重转换

多重转换原理：

旋转会改变网页元素的 坐标轴向 ，先写旋转，则后面的转换效果的轴向以 旋转后 的轴向为准，会影响转换结果

多重转换写法推荐：transform: translate() rotate();

先平移，再旋转：

HTML 复制代码

    <style>
      .box {
        margin: 0 auto;
        width: 300px;
        height: 300px;
        background-color: lightblue;
      }
      .so {
        width: 100px;
        height: 100px;
        background-color: yellow;
        transform: translate(80px) rotate(45deg);
      }
    </style>
 
  <body>
    <div class="box">
      <div class="so"></div>
    </div>
  </body>

先旋转，再平移：

HTML 复制代码

    <style>
      .box {
        margin: 0 auto;
        width: 300px;
        height: 300px;
        background-color: lightblue;
      }
      .so {
        width: 100px;
        height: 100px;
        background-color: yellow;
        transform: rotate(45deg) translate(80px);
      }
    </style>

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

平面转换 - 缩放

缩放 transform: scale(倍数); ，倍数大于 1 ，放大；倍数小于 1 ，缩小

HTML 复制代码

    <style>
      div {
        margin: 0 auto;
        width: 100px;
        height: 100px;
        background-color: lightblue;
      }
      .box:hover {
        transform: scale(2); /* 放大 */
      }
      .so:hover {
        transform: scale(0.5); /* 缩小 */
      }
    </style>

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

渐变背景

渐变是多个颜色逐渐变化的视觉效果，一般用于设置盒子的背景