css3与矩阵，css矩形

12.CSS3的Transform详解

1、translate()：移动元素对象。scale()：缩放元素对象。rotate()：旋转元素对象。skew()：倾斜元素对象。

2、rotate：旋转该元素，配合着transform-origin属性，transform-origin 是设置旋转点的。(没有设置transform-origin 属性也可以，只不过是根据该元素的中心点旋转，也就是center center)加上 transform-origin 设置旋转点。

3、transform属性用于向元素应用 2D 或 3D 转换；该属性允许我们对元素进行旋转、缩放、移动或倾斜。CSS3 transform属性作用：transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

4、transform-origin(X，Y)：用来设置元素的运动的基点（参照点）。默认点是元素的中心点。

相关问答

Q1: 移动端用translate替换left/top制作动画效果

1、为了解决这个问题，我们使用transform中的translate()来替换top和left 这个时候我们就会发现整个动画效果流畅了很多，在动画移动的过程中也没有发生repaint和reflow。

2、首先定义一个动画，如下图：在上面代码中定义了一个旋转动画，包括了开始旋转角度(0°)和最后旋转结束角度(360°)，和相对于自己的位置(控件的中心点)。

3、Scale：渐变尺寸伸缩动画效果Translate：画面转换位置移动动画效果Rotate：画面转换位置移动动画效果在介绍以上4种类型前，先介绍Tween Animation共同的节点属性。

4、具体实现过程如下：首先，我们需要创建一个SVG圆形路径，并设置其填充颜色为透明。然后，在CSS中，我们定义一个动画效果，利用关键帧来控制圆形路径的填充颜色从透明到不透明，再从不透明到透明，从而形成波浪循环的效果。

5、transform：translateY(60px)；（设置合适的动画效果）方案三：（动画盒子定位在触发事件盒子的外部区域）①动画盒子使用绝对定位的形式在适当位置勾画出符合要求的盒子。

6、四种基本的动画 ，透明／伸缩／移动／旋转。

Q2: 关于css3中的matrix3d

使用6个值的矩阵是2D转换，相对于是x轴和y轴的值。

CSS3 transform属性作用：transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。语法：transform： none|transform-functions；可有属性值说明：none：定义不进行转换。

定义 2D： 能够对元素进行移动，缩放，转动，拉长或拉伸。 3D： 允许对元素进行格式化，在三维空间进行操作。元素改变形状，尺寸和位置。

css3与矩阵的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于css矩形、css3与矩阵的信息别忘了在本站进行查找喔。