学习 transform 属性和常用方式

transform-origin 属性

作用是修改元素的中心点。transform属性 的变换都是基于中心点来进行变换的，中心点修改，元素变换后的位置就会改变。
可以使用一个，两个或三个值来指定，中心点偏移量。
第一个值指定X轴偏移量，参数类型是css 长度单位、百分比或 left, center, right, top, bottom关键字。第二个值指定y轴偏移量，参数类型是css 长度单位、百分比或 left, center, right, top, bottom关键字。第三个值指定z轴偏移量，参数类型只能是css 长度单位
transform-origin:0 0; 修改中心点为元素左上角。
transform-origin属性简介

transform 属性

对元素进行2D或3D变换。这个属性允许你将元素旋转，缩放，移动，倾斜等。
只能转换块级元素。如果元素具有display: block，则是块级元素。
transform 属性可以指定为关键字值 none(不应用任何变换) 或一个或多个 <transform-function> 值。

transform-function

是 CSS 数据类型，用于对元素的显示做变换。
值是CSS规定好的 转换函数，可指定一个或多个。
转换函数按从左到右的顺序相乘，这意味着复合变换按从右到左的顺序有效地应用。

matrix(a,b,c,d,e,f) -- 2D变换矩阵

矩阵函数。用六个指定的值来指定一个均匀的二维（2D）变换矩阵。
matrix(a, b, c, d, tx, ty) 是 matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1) 的简写
可转换为3x3的矩阵，通过这六个参数组成的矩阵与原坐标矩阵相乘，计算出元素旋转，缩放，移动，倾斜等坐标。
css3 matrix()矩阵简介
 理解 CSS3 transform中的Matrix(矩阵)

这里我们只需要知道。什么参数控制元素什么变换。

位移

e = x轴位移量，f = y轴位移量

缩放

a = x轴缩放倍数，d = y轴缩放倍数

倾斜

通过 a、b、c、d 来控制，对应 cosθ、sinθ、sinθ、cosθ 来计算旋转坐标
a、c = x轴倾斜(水平倾斜角度)，b、d = y轴倾斜(垂直倾斜角度)
水平倾斜角度 = -垂直倾斜角度，就是控制元素旋转变化

拉伸

通过 b、c 控制拉伸位置，使用tan()正切值。
b = x轴倾斜度数，c = y轴倾斜度数。

镜像

通过a、b、c、d来控制，各个坐标轴的镜像效果。

<!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 type="text/css">
      body {
        background-color: black;
      }
      .main {
        margin-top: 100px;
        display: flex;
      }
      .main-x{
        margin-left: 20px;
        width: 200px;
        height: 80px;
        box-shadow: inset 0 0 0 3px #ffffff;
        color: #ffffff;
      }

      .maina:hover {
        /* 位移 */
        transform: matrix(1, 0, 0, 1, 10, 30);
      }

      .mainb:hover {
        /* 缩放 */
        transform: matrix(1.5, 0, 0, 1.5, 0, 0);
      }

      .mainc:hover {
        /* 倾斜 */
        transform: matrix(0.866,0,0.5,1,0,0);
      }

      .maind:hover {
        /* 旋转 */
        transform: matrix(0.866,0.5,-0.5,0.866,0,0);
      }

      .maine:hover {
        /* 拉伸 */
        transform: matrix(1,0.249328,0.230868,1,0,0);
      }

      .mainf:hover {
        /* x轴镜像 */
        transform: matrix(-1, 0, 0, 1, 0, 0);
      }
    </style>
  </head>
  <body>
    <div class="main">
      <div class="main-x maina">位移</div>
      <div class="main-x mainb">缩放</div>
      <div class="main-x mainc">倾斜</div>
      <div class="main-x maind">旋转</div>
      <div class="main-x maine">拉伸</div>
      <div class="main-x mainf">镜像</div>
    </div>
  </body>
</html>

matrix3d(a00,a10,a20,a30,a01,a11,a21,a31,a02,a12,a22,a32,a03,a13,a23,a33) -- 3D变换矩阵

是一个 4x4的矩阵，用来描述一个三维（3D）变换。因为添加了z轴的变换，其复杂度比2D大幅增加。
a03: x轴移动的距离 a13: y轴移动的距离 a23: z轴移动的距离，其他参数是描述线性变换。
CSS3 matrix3d矩阵变换和动画变换
CSS3 3D transform变换，不过如此！

translate(x,y)

作用：平移元素位置。
一个参数表示移动X轴，两参数表示同时移动 x轴，y轴。
参数类型是css 长度单位或百分比。

translate3d(x,y,z)

作用：平移元素位置。
三个参数都需要，缺少无效。
参数类型是css 长度单位或百分比。
z轴，不能使用百分比，如果使用会被认为是无效属性。

translateX(x) 、 translateY(y) 、 translateZ(z)

translateX(x)在x轴上平移、translateY(y)在y轴上平移、translateZ(z)在z轴上平移。
参数类型是css 长度单位。

scale(x[,y]?)

作用：改变元素的大小。它可以增大或减小元素的大小，并且缩放量由矢量定义。
参数类型是<number>类型
一个参数，修改元素x轴大小。两个参数，修改x轴、y轴大小。
函数仅在(2D)中应用转换。
当它为负时，它执行点反射（就是修改点到坐标轴对面相等距离的位置）和大小修改。

scale3d(x,y,z)

作用：改变元素的大小。
参数类型是<number>类型
三个参数都是必须的，缺少视为无效。
当它为负时，它执行点反射和大小修改。

scaleX(x) 、scaleY(y) 、scaleZ(x)

scaleX(x) x轴每个点都应用缩放。 scaleY(y) y轴每个点都应用缩放。scaleZ(x) z轴每个点都应用缩放。
参数类型是<number>类型
缩放不是各向同性的，元素的角度也不守恒。就是只有对应轴坐标变换元素形状也会变换。
当参数是 -1 时。都会变换为，通过原点的垂直轴定义轴对称图形。

rotate(x)

根据中心点 (css 的 transform-origin属性可以修改中心点位置) 旋转元素.
参数类型是角度类型。如 90deg 代表旋转90度等。
正角表示顺时针旋转，负角表示逆时针旋转。

rotate3d(x, y, z, a)

作用：自定义旋转轴旋转元素。
x,y,z 代表各自坐标轴的矢量方向，参数类型是 <number>类型。a 代表角度，参数类型是角度类型
正角度表示顺时针旋转，负角度表示逆时针旋转。
与平面上的旋转相反，3D旋转的组成通常是不可交换顺序的。

rotateX(angle) 、 rotateY(angle) 、 rotateZ(angle)

rotateX(angle) 按x轴旋转，rotateY(angle) 按y轴旋转，rotateZ(angle) 按z轴旋转
参数类型是角度类型。
正角表示顺时针旋转，负角表示逆时针旋转。
与平面上的旋转相反，3D旋转的组成通常是不可交换顺序的。

skew(x-angle,y-angle)

作用：使元素拉伸。通过给每个坐标增加一个与指定角度成比例的值来实现的。
一个参数表示按x轴扭曲元素的角度，两个参数表示x轴，y轴同时改变。
参数类型是角度类型

skewX(angle) 、 skewY(angle)

skewX(angle) 用于水平拉伸，skewY(angle) 用于垂直拉伸。
参数类型是角度类型

perspective(n)

平面与用户之间的距离，以便给三维元素一定透视度。当每个3D元素的z>0时会显得比较大，而在z<0时会显得比较小。
参数类型是长度单位
如果它是0或负值，则不应用透视变换。

常用方式

元素进入方式

<!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 type="text/css">
      body {
        background-color: black;
      }
      .main {
        margin-top: 100px;
        display: flex;
      }
      .main-x{
        margin-left: 20px;
        width: 200px;
        height: 80px;
        box-shadow: inset 0 0 0 3px #ffffff;
        color: #ffffff;
      }

      .maina{
        transform: scale(0);
      }
      .scale-a-to{
        transform: scale(1);
        transition: transform .5s;
      }


      .mainb{
        transform:translate3d(-600px,0,0)
      }
      .scale-b-to{
        transform: translate3d(0,0,0);
        transition: transform .5s;
      }

      .mainc{
        transform:translate3d(0,-300px,0)
      }
      .scale-c-to{
        transform: translate3d(0,0,0);
        transition: transform .5s;
      }
    </style>
    <script type="text/javascript">
      function onTransform(){
        var maina = document.getElementsByClassName("maina")[0]
        maina.className = 'main-x maina scale-a-to'

        var mainb = document.getElementsByClassName("mainb")[0]
        mainb.className = 'main-x mainb scale-b-to'

        var mainc = document.getElementsByClassName("mainc")[0]
        mainc.className = 'main-x mainc scale-c-to'
      }
    </script>
  </head>
  <body>
    <div class="main">
      <div class="main-x mainb">左侧进入</div>
      <div class="main-x maina">放大进入</div>
      <div class="main-x mainc">上面</div>
    </div>
    <br>
    <button onclick="onTransform()">开始动画</button>
  </body>
</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>

      .main {
        display:flex;
        justify-content:center;
        width: 100px;
        height: 100px;
        background-color: #88e2fdda;
        position:relative;
      }
      /* 每个元素都添加动画 */
      .inner {
        position:absolute;
        width:20px;
        height:20px;
        border-radius:50%;
        background-color: #6a5acdeb;
        /* transform-origin:0 0; 代表左上角 */
        /* 修改元素中心点 为父元素中心 */
        transform-origin: 10px 50px;
        animation:an-rotate 2s ease-out infinite;
      }
      .inner:nth-child(2){
        height:18px;
        width:18px;
        animation-delay:.2s;
      }
      .inner:nth-child(3){
        height:16px;
        width:16px;
        animation-delay:.4s;
      }
      .inner:nth-child(4){
        height:14px;
        width:14px;
        animation-delay:.6s;
      }

      @keyframes an-rotate{
        to{
          transform:rotate(1turn);
        }
      }
    </style>
  </head>
  <body>
    <div class="main">
      <div class="inner"></div>
      <div class="inner"></div>
      <div class="inner"></div>
      <div class="inner"></div>
    </div>
  </body>
</html>

学习 transform 属性 和 常用方式

transform-origin 属性

transform 属性

transform-function

matrix(a,b,c,d,e,f) -- 2D变换矩阵

位移

缩放

倾斜

拉伸

镜像

matrix3d(a00,a10,a20,a30,a01,a11,a21,a31,a02,a12,a22,a32,a03,a13,a23,a33) -- 3D变换矩阵

translate(x,y)

translate3d(x,y,z)

translateX(x) 、 translateY(y) 、 translateZ(z)

scale(x[,y]?)

scale3d(x,y,z)

scaleX(x) 、scaleY(y) 、scaleZ(x)

rotate(x)

rotate3d(x, y, z, a)

rotateX(angle) 、 rotateY(angle) 、 rotateZ(angle)

skew(x-angle,y-angle)

skewX(angle) 、 skewY(angle)

perspective(n)

常用方式

元素进入方式

加载动画

学习 transform 属性和常用方式