CSS3中变形与过渡的使用

CSS3中变形与过渡的使用

2D操作

---

1. 平移：translate(x轴的平移距离，y轴的平移距离)

示例:
	transform:translate(20px,20px);

2. 旋转：rotate(旋转的角度)
   • rotateX：围绕X轴旋转
   • rotateY：围绕Y轴旋转
   • rotateZ：围绕Z轴旋转

示例：
   	transform:rotate(45deg);	//绕X,Y,Z轴进行旋转
   	transform:rotateX(10deg);	//绕X轴进行旋转
   	transform:rotateY(10deg);	//绕Y轴进行旋转
   	transform:rotateZ(10deg);	//绕Z轴进行旋转

3. 缩放：scale(x轴缩放的大小，y轴缩放的大小)

示例：
   	transform:scale(0.5,0.5); //缩放0.5倍

4. 倾斜的效果：skew(x轴倾斜的角度，y轴倾斜的角度)

示例：
	transform:skew(10deg,10deg);

---

transform-origin属性

transform-origin可以通过属性来改变旋转中心
实例

transform-origin: 50% 100%;
transform-origin: left top;
transform-origin: 200px 100px;

---

3D操作之三维空间的变形

三维空间中用到了translate和rotate两个属性

1. 平移：translate(x轴的平移距离，y轴的平移距离,Z轴的平移距离)

示例

transform:translate(x,y);
transform:translateY(y);
transform:translate3D(x,y,z);	/*3D位移*/

2. 旋转：rotate用法见上面