matrix()css3的简单介绍

本文目录一览：

• 1、css3旋转半径的计算
• 2、CSS3中动画属性transform,transition和animation属性的区别
• 3、CSS3中transform:matrix(),括号内有六个参数,分别代表什么?请说详细...

css3旋转半径的计算

1、border-radius： 30px； /* Opera 5， IE 9 */ } 圆角的实现比较简单，只要设好一个半径值就可以了。遗憾的是，目前所有的IE都不支持CSS圆角，要等到IE 9才行。

2、综述：如果是以y轴旋转，旋转半径就用x=x（t）表示，微分用dy=（dy/dt）·dt。一条平面曲线绕着它所在的平面内的一条定直线旋转所形成的曲面叫作旋转面。

3、Border radius（边界半径）W3C建议已经建议为boder增加几个属性选项，其中之一就是border-radius，目前这个属性已经被Firefox和Safari 3(Chrome)支持，比较遗憾的是IE不支持此属性。

4、回转半径是用转动惯量除以总质量再开平方。 回转半径当一力矩作用于一个物体时，物体会呈现应有的旋转运动。物体对于一个直轴的回转半径，是此物体所有粒子，对于此直轴的均方根距离。

CSS3中动画属性transform,transition和animation属性的区别

1、CSS3动画主要通过transition和animation两种方式来实现，其中，transition是为页面元素设置某个需要产生动画效果的属性，如宽度(width)，高度(height)，透明度(opacity)，甚至3D旋转等，并使这些值在变化时产生相应的过渡效果。

2、位置参数。transform：变形。改变 CSS3中主要包括 旋转：rotate() 顺时针旋转给定的角度，允许负值 rotate(30deg)。transition： 允许CSS属性值在一定的时间区间内平滑的过渡，需要事件的触发，例如单击、获取焦点、失去焦点等。

3、CSS3 transform都有哪些常用属性？transform的属性包括：rotate() / skew() / scale() / translate(，) ，分别还有x、y之分，比如：rotatex() 和 rotatey() ，以此类推。

4、添加了几个动画效果的属性通过设置这些属性，可以做出一些简单的动画效果而不需要再去借助JavaScript。CSS3动画的属性主要分为三类：transform、transition以及animation。 transform rotate 设置元素顺时针旋转的角度。

5、translate 同其他属性rotate/skew/scale等，构成css中变形的几种方式。translate(x， y) 是将dom元素，在原来的基础上，偏移一定距离。translate需要跟transform结合使用。

CSS3中transform:matrix(),括号内有六个参数,分别代表什么?请说详细...

在css3中transform主要包括以下几种： 旋转rotate、 扭曲skew、 缩放scale 和 移动translate 以及 矩阵变形matrix。

语法transform： none|transform-functions；值 描述none定义不进行转换。matrix(n，n，n，n，n，n)定义 2D 转换，使用六个值的矩阵。

transform属性实现了一些可用SVG实现的同样的功能。它可用于内联(inline)元素和块级(block)元素。它允许我们旋转、缩放 和移动元素 ，他有几个属性值参数：rotate；translate；scale；skew；matrix。

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

说明：设置或检索对象以某个原点进行转换。该属性提供2个参数值。如果提供两个，第一个用于横坐标，第二个用于纵坐标。如果只提供一个，该值将用于横坐标；纵坐标将默认为50%。对应的脚本特性为transformOrigin。

css3新属性：RGBA和透明度 RGBA是RGB色彩模型的一个扩展。