范围框

  • 受css控制的元素，其范围框是边框框，即元素边框的边界。在计算范围框时是不算上轮廓和外边距的。

注意

  • 对于所有变形函数，元素都有自己的堆叠上下文。例如，经过缩放/放大的元素，其所占的空间大小是不变的，这一点对所有变形函数都成立。

  • 变形函数的书写顺序可能会影响最后的显示结果，变形函数实施顺序，左->右

//书写1
img{
  tranform: translate(200px) rotate(45deg);
}
//书写2
img{
  transform: translate(200px) rotate(45deg);
}
  • 旋转图像的过程中，主轴和垂轴也会变

结果

  • 当有多个变形函数时，每一个函数都要正确设置，否则整个变形都将失效

  • 变形函数不能应用在基元行内框上，例如，span元素、a元素

平移函数

  • translateX()：延x轴平移
  • translateY()：延y轴平移
  • translate()：同时设置x轴和y轴的平移距离
  • translateZ()：设置z轴方向的平移，不能取值百分数。任何有关z轴的百分数都不能取值百分数
  • translate3d()：能同时设定x轴、y轴、z轴的平移距离
  • 取值百分数相对于自身的宽度计算

缩放函数

  • scaleX()：缩放/放大宽度
  • scaleY()：缩放/放大高度
  • scale()：缩放/放大宽度和高度
  • scaleZ()：在z轴上缩放/放大
  • scale3d()：在三个方向上缩放/放大

旋转函数

  • rotate()：效果等同于rotateZ()
  • rotateX()：绕x轴旋转
  • rotateY()：绕y轴旋转
  • rotateZ()：绕z轴旋转
  • rotate3d()：前三个值指定x轴、y轴和z轴的分量。第四个值为角度值。
  • 判断旋转的方向：站在向量的终点，顺时针旋转角度

倾斜函数

  • skewX()
  • skewY()
  • skew()

视域函数

  • perspective()：参数为length，参数值必须为正数，不能为0，其它值将导致视域函数失效
  • 当值越大，视觉越温和；当值越小，视觉越极端
  • 若想在变形函数列表中设定视域值，要将视域函数放在最前面

参数分别为200px、800px、2000px

不同长度值视觉的表现

矩阵函数

  • matrix()
  • matrix3d()

变形原点

  • transform-origin
  • 取值：英文字母，例如，top、left、center等，百分数，长度值。对于z轴只能取长度值，百分数相对于自身的宽高计算
  • 移动函数不受变形原点影响

开启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>
    #outer{
      width: 200px;
      height: 200px;
      background-color: red;
      transform: perspective(500px) rotateY(45deg);
    }
    #inner{
      width: 100px;
      height: 50px;
      background-color: blue;
      transform: perspective(500px) translateZ(50px) rotateX(45deg);
    }
  </style>
</head>
<body>
  <div id="outer">
    outer
    <div id="inner">inner</div>
  </div>
</body>
</html>
  • 效果图

效果图

开启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>
    #outer{
      width: 200px;
      height: 200px;
      background-color: red;
      transform: perspective(500px) rotateY(45deg);
      transform-style: preserve-3d;
    }
    #inner{
      width: 100px;
      height: 50px;
      background-color: blue;
      transform: perspective(500px) translateZ(50px) rotateX(45deg);
    }
  </style>
</head>
<body>
  <div id="outer">
    outer
    <div id="inner">inner</div>
  </div>
</body>
</html>
  • 效果图

效果图

  • 阻碍开启3D模式的属性如下：必须设置为以下值或不声明

阻碍3D模式开启的属性

定义视域

  • perspective属性

  • 视域函数效果

.container{
    display: flex;
    justify-content: center;
}
.container>div{
    width: 100px;
    height: 100px;
    background-color: red;
    margin-left: 50px;
    transform: perspective(500px) rotateX(-45deg);
}

视域函数

  • 视域属性效果
.container{
    display: flex;
    justify-content: center;
    perspective: 500px;
}
.container>div{
    width: 100px;
    height: 100px;
    background-color: red;
    margin-left: 50px;
    transform: rotateX(-45deg);
}

视域属性

  • 两者的区别：视域属性与视域函数不同的是，视域属性会应用到当前元素及其所有子元素上，所以，子元素会在其共有的父元素视域上变形。即perspective属性用来设定共有视域

移动视域的原点

  • perspective-origin：能够设置的值与transform-origin相同

各类取值结果图