对第十四周的css3学习总结

@ This is my first blog article 学习前端的第四周

新的改变

一. 2D 3D转换的有关属性

1. Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。
2. 2D转动顺时针方向 转动30deg: transform: rotate(30deg);
3. 2Dx，y轴方向 移动50px,100px: transform: translate(50px,100px);
4. 2D原始宽高的2，3倍: transform: scale(2,3);
5. 表示x，y轴倾斜角度; transform: skew(30deg,20deg);
6. matrix()方法和2D变换方法合并成一个:
   transform:matrix(a,b,c,d,e,f);
   正常值transform:matrix(1,0,0,1,0,0);
   1.a定义的是 scaleX 通过设置 X 轴的值来定义缩放。值：>=0
   2.b定义的是 skew 定义 2D 倾斜
   3.c定义的是 rotate 定义2D 旋转角度
   4.d定义的是 scaleY 通过设置 Y 轴的值来定义缩放。值：>=0
   5.e定义的是 translateX 通过设置 X 轴的值来定义左右位移。值：任意
   6.f定义的是 translateY 通过设置 Y 轴的值来定义上下位移。值：任意

二.animation的有关属性

使用简写属性把 animation 绑定到一个 < div>元素：

div
{
	width:100px;
	height:100px;
	background:red;
	position:relative;
	animation:mymove 5s infinite;
	-webkit-animation:mymove 5s infinite; /*Safari and Chrome*/
}

@keyframes mymove
{
	from {left:0px;}
	to {left:200px;}
}

@-webkit-keyframes mymove /*Safari and Chrome*/
{
	from {left:0px;}
	to {left:200px;}
}

三.结尾

没了