transform属性用的多吗,transform的属性值
CSS3中动画属性transform，transition和animation属性的区别
1、translate3d(x,y,z) 是用来控制元素的位置在页面上的三轴的位置的；
2、rotate(deg)是用来控制元素旋转角度的；
3、skew[x,y](deg) 这个属性是用来制作倾斜度的，做过设计的人可能会知道，这个是用来在2d里面创建3d透视图的时候必须的属性；
4、scale3d(x,y,z) 用来放大缩小效果，属性是比值；
5、matrix3d，css矩阵。通过这个矩阵属性，涵盖了上面所有的属性值，但是个人觉得可读性极差（全都是数字和单位，背起来有点模糊），目前没有理由推荐使用。
有关css3的transform-style属性
flat是子元素将不保留其3D位置 另外一个是保留，，，，你说没什么差别，应该是你应用上，本身就没什么区别，所以看不出来，你可以试试一些反差大点的来看。
为什么css3使用transform作为属性而不是直接使用rotate，translate
就像分类一样，rotate，translate，scale等都是属于动作，都属于transform，等于是给他们都放到这一个分类里，每次调用只需要transform就会提示你想要的动作。
transform-style有几个属性值,其中的含义是什么?
ransform--style属性是用来指定嵌套元素是怎样在三维空间中呈现的，该属性有两个属性值:
1. flat:表示所有子元素在2D平面呈现（默认值）。
2.preserve-3d:表示所有子元素在3D空间中呈现。
拓展:
该属性是css3的新特性，在不同的浏览器上使用时，要根据浏览器的不同配置-webkit-, -ms- 或 -moz-这些支持浏览器识别的前缀属性。
该属性没有继承值。
js语法是object.style.transformStyle=" flat|preserve-3d"。
使用此属性必须先使用 transform 属性。
css3 transition和transform的应用
一、首先学习的是transition属性（zoom不支持transition,适用于具体数值的属性值变化或者背景图的变换）
transition 过渡 作为一个复合属性
1.transition-property 指定可以过渡的属性
默认值是all 定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔。
2.transition-duration 指过渡完成的时间
默认值为0s
3.transition-timing-function 过渡的动画类型
默认值为ease
ease 规定慢速开始，然后变快，之后慢速结束的过渡效果
ease-in 规定以慢速开始的过渡效果
ease-out 规定以慢速结束的过渡效果
ease-in-out 规定以慢速开始和结束的过渡效果
linear 规定以相同速度开始至结束的过渡效果
cubic bezier(n,n,n,n) 在cubic-bezier函数中定义自己的值
4.transition-delay 延迟执行过渡的时间
默认值为0s
二、transform属性
transform 向元素应用2D或3D转换 只对block级元素生效
1.translate 位移
translateX() 在x轴上发生位移或者变形
translateY() 在y轴上发生位移或者变形
translate(x,y) 在x轴 ，y轴上发生位移或者变形 当只有一个值的时候，只有x轴生效
2.scale 缩放
scaleX() 设置在x轴上发生缩放
scaleY() 设置在y轴上发生缩放
scale(x,y) 设置在x轴，y轴上发生缩放 当只有一个值的时候，x，y轴都发生缩放可以设置负数 使用场景：设置小于12px的字体
3.rotate 旋转 2d旋转 设置元素在2d平面旋转（z轴），正数按顺时针，负数按逆时针
rotateX（）设置沿x轴旋转
rotateY () 设置沿y轴旋转
4.skew 倾斜
skewX 绕x轴发生倾斜
skewY 绕y轴发生倾斜
skew(x,y) 绕x,y轴发生的倾斜 x轴和y轴和我们理解的相反，常用于平行四边形图案
三、transform-origin: 设置旋转元素的基点位置
transform-origin是变形原点，也就是该元素围绕着那个点变形或旋转，该属性只有在设置了transform属性的时候起作用；
因为我们元素默认基点就是其中心位置，换句话说我们没有使用transform-origin改变元素基点位置的情况下，transform进行的rotate,translate,scale,skew,matrix等操作都是以元素自己中心位置进行变化的。
但有时候我们需要在不同的位置对元素进行这些操作，那么我们就可以使用transform-origin来对元素进行基点位置改变，使元素基点不在是中心位置，以达到你需要的基点位置。
下面我们主要来看看其使用规则：
transform-origin(X,Y):用来设置元素的运动的基点（参照点）。默认点是元素的中心点。其中X和Y的值可以是百分值,em,px，其中X也可以是字符参数值left,center,right；Y和X一样除了百分值外还可以设置字符值top,center,bottom 。
语法：-moz-transform-origin: [ | | left | center | right ][ | | top | center | bottom ] ?
transform-origin接受两个参数，它们可以是百分比，em，px等具体的值，也可以是left,center,right，或者 top,center,bottom等描述性参数 ;
top left | left top 等价于 0 0；
top | top center | center top 等价于 50% 0
right top | top right 等价于 100% 0
left | left center | center left 等价于 0 50%
center | center center 等价于 50% 50%（默认值）
right | right center | center right 等价于 100% 50%
bottom left | left bottom 等价于 0 100%
bottom | bottom center | center bottom 等价于 50% 100%
bottom right | right bottom 等价于 100% 100%
css3如何单独设置某一transform属性？
一个元素的多重transform
就像这样：
-webkit-transform: rotate(360deg) scale(2);
你还可以在分号之前加上translate(1em,0)，用空格隔开。
多拉A梦的Transform
在多拉A梦的CSS中的transform只用了rotate
例如#head_light中的
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-o-transform: rotate(20deg);
-o-transform应该是Opera有效。