阅读 7540

CSS3 transform 属性详解

Transform 属性

css3 中 transfrom 属性用户元素空间位置的变换。
本文结果中展示的画面都是基于下图进行的变换

二维变换

Matrix

  • 3x3 的变换矩阵
  • 对二维向量进行转换
    其中 x1、y1 为经过 Matrix 转换后的向量。由公式可知,Matrix 中 e, f 主要用于设置元素在 X轴和 Y轴上的平移。a, d 主要用于设置元素在 X轴和 Y轴上的缩放。a,b,c,d 用于设置元素在 XY 平面上的旋转。rotate/translate/screw 等都可以直接通过设置 Matrix 来达到同样的效果

translate

  • 设置元素在 X轴或者 Y轴上的平移变换
    translate(15px, 25px)      #元素沿着 X轴正方向平移 15px,沿着 Y轴正方向平移 25px
    Matrix(1, 0, 0, 1, 15, 25) #效果相同
    复制代码

scale

  • 设置元素在 X轴或者 Y轴上的缩放
    scale(2, 0.5)              #元素在 X轴上拉伸一倍,在 Y轴上缩小一倍
    Matrix(2, 0, 0, 0.5, 0, 0) #效果相同
    复制代码

  • scale 的参数为负数时,元素在对应的方向上进行反转

rotate

  • 二维空间中,rotate即围绕屏幕法向量旋转,等同于 rotateZ
    rotate(30deg)                         #围绕屏幕法向量顺时针旋转 30度
    Matrix(0.866, 0.5, -0.5, 0.866, 0, 0) #效果相同 Sin(30) ≈ 0.866
    复制代码

skew

  • 设置 X轴和 Y轴的倾斜角度

transform-origin

transform 变换原点

  • 默认值为(50%, 50%, 0),即默认的变换原点位于变换元素的 Z=0 的 XY 平面的中心点
  • 取值为 (<length>|<percentage>|left|center|right, <length>|<percentage>|top|center|bottom, <lenght>) 三个参数从左到右分别表示变换原点相盒模型左侧的偏移量、盒模型顶部的偏移量以及 Z轴偏移量
rotate(30deg);
复制代码
rotate(30deg);
transform-origin: 'left top';
复制代码

设置 transform-origin 为元素坐上点后,元素围绕左上角旋转

transform 各个变换执行顺序

旋转和平移变换同时进行

transform: translateX(100px) rotate(90deg);
复制代码

结果如下图所示,可以发现,结果中黄色方框先沿着X轴正方向移动100px,然后绕Z轴进行了90度顺时针渲染。故 transform 中,各个变换是从左往右依次执行

transform:  rotate(90deg) translateX(100px);
复制代码

接着,我们将 transform 中两个变换顺序调转,结果如下图所示。可以发现黄色方框先绕Z轴旋转90度,然后沿着X轴正方向移动100px。

matrix 矩阵运算

由上一章节可知,本章节中平移变换 translateX(100px) 对应的变换矩阵 translateMat 为

\begin{bmatrix}
{1}&{0}&{100}\\
{0}&{1}&{0}\\
{0}&{0}&{1}\\
\end{bmatrix}

rotate(90deg)对应的变换矩阵 rotateMat 为

\begin{bmatrix}
{0}&{-1}&{0}\\
{1}&{0}&{0}\\
{0}&{0}&{1}\\
\end{bmatrix}

对 translateMat 和 rotateMat 进行矩阵乘积运算,并将运算结果导入 transform 属性,查看结果

  1. rotateMat * translateMat
    结果为
\begin{bmatrix}
{0}&{-1}&{0}\\
{1}&{0}&{100}\\
{0}&{0}&{1}\\
\end{bmatrix}

CSS 代码为transform: matrix(0, 1, -1, 0, 0, 0),运行结果如下图所示,可见设置 matrix 等于 rotateMat * translateMat 的变换效果等效于transform: rotate(90deg) translateX(100px);

三维变换

CSS3三维世界坐标系如下图所示,采用的是左手坐标系,Y轴方向沿着屏幕向下

perspective

  • perspective 定义了 3D 元素和视图之间的距离。设置的是透视镜头到 XY 轴平面的距离

    perspective 设置的是透视点到屏幕及(XYZ空间中Z=0平面的距离),即透视点位置为(0, 0, 150px)

    <!DOCTYPE html>
    <html>
        <head>
            <style>
            #div1
            {
                position: relative;
                height: 150px;
                width: 150px;
                margin: 50px;
                padding:10px;
                border: 1px solid black;
                -webkit-perspective:150; /* Safari and Chrome */ #设置 perspecctive 为 150px
            }
            
            #div2
            {
                padding:50px;
                position: absolute;
                border: 1px solid black;
                background-color: yellow;
                -webkit-transform: rotateX(45deg); /* Safari and Chrome */
            }
            </style>
        </head>
    
        <body>
            <div id="div1">
              <div id="div2">HELLO</div>
            </div>
        </body>
    </html>
    复制代码
    结果:
    将 perspective 设置为 1500px,结果为:
    perspective 的值与元素呈现的大小无关,perspective 表示透视点到元素的距离,透视点越远,透视效果越差
  • 添加了 perspective 属性的元素,添加后场景中出现 Z轴,故其子元素获得 3D 效果,包括 translateZ 和 rotateY/rotateX

translateZ

  • 通过在 transform 中添加 translateZ 属性,可以实现元素在 Z轴上的平移变化
    1. 在添加 perspective 元素的子元素上的 transform 属性中添加 translateZ
      <!DOCTYPE html>
      <html>
          <head>
              <style>
              #div1
              {
                  position: relative;
                  height: 150px;
                  width: 150px;
                  margin: 50px;
                  padding:10px;
                  border: 1px solid black;
                  -webkit-perspective:150; /* Safari and Chrome */ #设置 perspecctive 为 150px
              }
              
              #div2
              {
                  padding:50px;
                  position: absolute;
                  border: 1px solid black;
                  background-color: yellow;
                  -webkit-transform: translateZ(-50px) rotateX(45deg); /* Safari and Chrome */
              }
              </style>
          </head>
      
          <body>
              <div id="div1">
                <div id="div2">HELLO</div>
              </div>
          </body>
      </html>
      复制代码
      在 id=div2 的元素上添加了 translateZ(-50px),即将元素沿着 Z轴负轴平移了 150px,结果为:
      CSS3 中的三维坐标系采用的是左手坐标系,Z轴垂直屏幕向外,故将 div2 沿着 Z轴负轴平移 50px 后,里面的元素实际上位于了屏幕后面 50px 的位置,故看起来变小了

rotateY/rotateX

  • rotateY 和 rotateX 可以设置元素围绕 Y轴或 X轴进行顺旋转
    rotateY(45deg) #围绕 Y轴顺时针旋转 45 度
    rotateX(-45deg) #围绕 Z轴逆时针旋转 45 度
    复制代码

Matrix3D

  • TODO
文章分类
前端
文章标签