@ This is my first blog article 学习前端的第四周
新的改变
一. 2D 3D转换的有关属性
- Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转,缩放,移动,倾斜等。
- 2D转动顺时针方向 转动30deg: transform: rotate(30deg);
- 2Dx,y轴方向 移动50px,100px: transform: translate(50px,100px);
- 2D原始宽高的2,3倍: transform: scale(2,3);
- 表示x,y轴倾斜角度; transform: skew(30deg,20deg);
- 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;}
}
三.结尾
没了