CSS3中 transform 和 transition

transform: 变形。改变

语法：transform: none|transform-functions;

旋转 rotate

• 2D 旋转：rotate(angle) 顺时针旋转给定的角度，允许负值 rotate(30deg)
• 3D 旋转：rotate3d(x,y,z,angle)
• 沿着 X 轴的 3D 旋转：rotateX(angle)
• 定义沿着 Y 轴的 3D 旋转：rotateY(angle)
• 定义沿着 Z 轴的 3D 旋转：rotateZ(angle)

拉伸 skew

• 沿着 X 和 Y 轴的 2D 倾斜转换：skew(x-angle,y-angle)。举例：skew(30deg,20deg)
• 沿着 X 轴的 2D 倾斜转换：skewX(angle)
• 沿着 Y 轴的 2D 倾斜转换：skewY(angle)

缩放 scale

• 2D 缩放转换：scale(x,y)
• 通过设置 X 轴的值来定义缩放转换：scaleX(x)。举例：scaleX(1)，实际效果相当于盒子被拉宽x倍，1的话就没有改变。
• 通过设置 Y 轴的值来定义缩放转换：scaleX(y)。
• 3D 缩放转换：scale3d(x,y,z)
• 通过设置 Z 轴的值来定义 3D 缩放转换：scaleZ(z)

开发中遇到的问题以及解决：

1. 在开发中发现，画一个圆点，设置的宽高数值比较小时 width: 0.15rem; height: 0.15rem; border-radius: 50%;，发现圆形并没有那么圆。

   猜想问题原因：个人认为是 js 对浮点数计算不精确，导致的。

   解决办法1：调整宽高，比如：width：0.14rem; height: 0.14rem; （有时候能起作用，治标不治本）

   解决办法2：设置 width: 15rem; height: 15rem; transform: scale(0.1); transform-origin: center center; （先放大，再缩小，比较好）

2. 突破浏览器限制字体大小不能低于12px的限制

p: {
  font-size: 12px;
  -webkit-transform: scale(0.75);  /* 缩小至原的0.75倍 */
}

偏移 translate

• 2D 偏移：translate(x,y)
• 延 X 轴移动 translateX(x)
• 延 Y 轴移动 translateX(y)
• 3D 偏移：translate3d(x,y,z)
• 延 Z 轴移动 translateX(z)

  各个浏览器兼容写法举例：

.box{
  transform: translate(50px, 100px);
  -ms-transform: translate(50px, 100px); /* IE 9 */
  -webkit-transform: translate(50px, 100px); /* Safari游猎 和 Chrome谷歌 */
  -o-transform: translate(50px, 100px); /* Opera */
  -moz-transform: translate(50px, 100px);} /* Firefox */

矩阵 matrix

• 2D 转换，使用六个值的矩阵：matrix(n,n,n,n,n,n)，同做矩阵的方式实现所有的2D转换方法
• 3D 转换，使用 16 个值的 4x4 矩阵：matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)

  矩阵解释起来有点长，它的作用也完全能被更好理解的其它方式代替，这里不展开介绍。

透视 perspective

• 为 3D 转换元素定义透视视图：perspective(n)

  作用：perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。

注：perspective 属性只影响 3D 转换元素。

例子：

    #father {
      width: 100vw;
      height: 100vh;
　　　 border: 1px solid #000;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      perspective: 100px;
      perspective-origin: center center;
    }

    #child {
      height: 100px;
      width: 100px;
      cursor: pointer;
      position: absolute;
      animation: mymove 3s linear 0s 1 normal;
      background-color: aqua;
      transform: 
        rotate3d(1, 0, 0, 360deg) 
        scale3d(1, 1, 2)
        translate3d(0px, 0px, 10px);
    }

-------------------------------------------
    <div >
      <div >看效果</div>
    </div>

起点位置 transform-origin

改变起点位置 transform-origin: x-axis y-axis z-axis; 分别定义了，x轴、y轴、z轴的偏移量，允许负数。

• x-axis、y-axis 的值：
  1. 关键字[keyword]：top、left、center、right、bottom。
  2. 具体值：%、em、px等
• z-axis 的值：[length]

下面例子中的三种写法都是相等的,也是 transform-origin 的默认值：

#app {
  transform-origin: center
  transform-origin: center center 0
  transform-origin: 50% 50% 0
}

关键字和百分比之间的对应关系：

• top = top center = center top = 50% 0
• right = right center = center right = 100%或(100% 50%)
• bottom = bottom center = center bottom = 50% 100%
• left = left center = center left = 0或(0 50%)
• center = center center = 50%或（50% 50%）
• top left = left top = 0 0
• right top = top right = 100% 0
• bottom right = right bottom = 100% 100%
• bottom left = left bottom = 0 100%

transition:允许CSS属性值在一定的时间区间内平滑的过渡，

需要事件的触发，例如单击、获取焦点、失去焦点等

transition:property duration timing-function delay;

• property: CSS的属性，例如：width|height|all 为 none 时停止所有的运动，可以为 transform
• duration: 持续时间
• timing-function: 过渡效果

  可能的取值：

  • linear 匀速，等于 cubic-bezier(0,0,1,1)
  • ease 块慢块，等于 cubic-bezier(0.25,0.1,0.25,1)
  • ease-in 慢块，等于 cubic-bezier(0.42,0,1,1)
  • ease-out 块慢，等于 cubic-bezier(0,0,0.58,1)
  • ease-in-out 块慢块，等于 cubic-bezier(0.42,0,0.58,1)
  • cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。
• delay: 延迟

注意：当 property 为 all 的时候，为所有变动添加过渡

例如：transition: all 2s ease 0s;