七、CSS3中的变形处理

在css3中，可以利用transform功能实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形处理，这四种效果使用的先后顺序不同，页面显示的也会有所不同。

1、transform功能的分类

1.1缩放

　　使用scale方法来实现文字或图像的缩放处理，在参数中指定缩放倍率，比如scale（0.5）表示缩小一半，也可以同时指定元素水平方向和垂直方向的放大倍率，用逗号隔开。

1.2倾斜

　　使用skew方法实现文字或图像的倾斜处理，在参数中分别指定元素在水平方向和垂直方向上的倾斜角度，例如skew（30deg,30deg），表示水平和垂直方向各顺时针倾斜30度，当只有一个参数时，表示水平方向倾斜，垂直方向不倾斜。

1.3移动

　　使用translate方法来移动文字或图像，在参数中分别指定水平和垂直方向上的移动距离，只写一个参数时，表示只有水平方向移动。

2、对一个元素使用多种变形

2.1对一个元素使用多种变形

2.2指定变形的基准点

　　在使用transform方法进行文字或图像变形的时候，是以元素的中心点为基准点，使用transform-origin属性，可以改变变形的基准点。

3、使用3D变形功能

3.1 3D变形概述

　　2009年3月，CSS 3D Transform模型正式推出，该模型是对CSS 2D Transform模型的一个扩展，其中添加了一些特性，其中包括在3D空间中实现透视投影、旋转及变形特效。

3.2 旋转

　　与2D旋转功能实现方法类似，可以分别使用rotateX、rotateY、rotateZ方法使元素围绕X轴、Y轴、Z轴旋转，在参数中加入角度值，角度值后面跟表示角度的单位deg文字即可，旋转方向为顺时针。可以将3D变形方法写在一行样式代码中，比如：

.transform1{
    transform: rotateX(0deg) rotateY(0deg) rotateZ(90deg);
    background:  red;
    margin-top:  50px;
    width: 200px;
}

3.3 缩放

　　与2D缩放功能实现方法类似，可以分别使用scaleX、scaleY、scaleZ方法使元素按X轴、Y轴、Z轴缩放，在参数中指定缩放倍率，比如scaleX（0.5）表示水平方向上缩小一半，scaleZ（2）表示在Z轴上放大一倍。

3.4 倾斜

　　可以分别使用skewX方法及skewY方法使元素在X轴及Y轴上进行顺时针方向倾斜，注意没有在skewZ方法，因为倾斜使二维变形，不能在三维空间倾斜。

3.5 移动

　　可以分别使用translateX、translateY、translateZ方法使元素在X轴、Y轴、Z轴（正数是前移）方向上进行移动，在参数中加入移动距离。

4、变形矩阵

　　矩阵函数matrix()函数与matrix3d()是理解CSS3中变形技术的关键。在大多数时候，为了简单起见，你可以直接使用rotate()与skewY()之类的方法，但是在每一种变形方法的背后都存在着一个对应的矩阵。

4.1 变形与坐标系统

　　对于计算机世界的坐标系统，每一个页面都是一个坐标系统，原点为坐标系统的左上角，坐标位置为（0，0）。X轴方向为从左向右，Y轴为从上往下，Z轴决定阅读者与页面之间的距离。Z坐标值越大代表距离越近，Z轴值越小代表距离越远。

　　当对一个对象应用变形时，首先建立本地坐标系统。在默认情况下，本地坐标系统中的原点在对象正中央。

4.2 计算2D变形（3*3矩阵）

4.3 计算3D变形（4*4矩阵）

 

转载于:https://www.cnblogs.com/LLMjiayou7/p/9192642.html