CSS3 - 2d属性 - 《HTML5》

2Dskew倾斜变形
动画属性

2Dskew倾斜变形

skew表示倾斜效果，可以使元素变形

旋转中心：默认元素正中心
方向：y轴逆时针为正方向x轴顺时针为正方向
transform:skew(x,y)里面传的是角度
skew(+45deg)代表y=0：skew(+45deg,0)也就是skewX(45deg),x轴不变，y轴逆时针倾斜45deg
skew(-45deg)x轴不变，然后y轴顺时针旋转45deg
skew(0,+45deg)y轴不变，x轴顺时针旋转45deg也就是skewY(45deg)
skew(0,-45deg)y轴不变，x轴逆时针旋转45deg
- 当要是用多个2d属性时，几个属性值写在一起*
skew(+x)表示把元素向右推xdeg，也就是形成一个左上和右下角的平行四边形
skew(-x)表示把元素向左推xdeg
skew(0,+y)表示把元素向下推ydeg
skew(0,-y)表示把元素向上推ydeg
skew(+x,+y)先把元素向右推xdeg，再把元素向下推ydeg

动画属性

定义动画

@keyframes 动画的名字 {
出发地：
from{
样式
}
目标地：
to{
样式
}
}
from和to可以用百分比0%和100%表示

使用animation应用动画

animation-name：动画名字
animation-duration：动画持续的时间
animation-timing-function时间曲线 linear,ease-in,ease-out,ease-in-out
animation-delay:表示动画延迟多久开始
animation-iteration-count动画执行次数，默认执行1次，可以设置执行次数，infinite表示执行无限次
animation-direction:表示动画执行方向，默认normal,可以设置为alternate到达目标值反向执行动画，一般用- 来做钟摆效果
animation-play-state:设置动画的运行或者暂停，暂停：paused 运行：running,这个属性需要跟js相结合使- 用
animation-fill-mode：
animation-fill-mode: none 鼠标浮上去延迟一秒然后到达出发点开始动画再到达目标点最后恢复初始状态
animation-fill-mode: forwards;鼠标浮上去延迟一秒然后到达出发点开始动画等到达目标点的时候就不再恢复初始状态
animation-fill-mode: forwards; 鼠标浮上去先到达出发点然后延迟1s开始动画再到达目标点最后恢复初始状态
animation-fill-mode: backwards; 结合forwards和backwards，鼠标浮上去先到达出发点然后延迟1s开始动画等到达目标点的时候就不再恢复初始状态

css3 的过渡和动画

    过渡： transition <br />            动画： animation   @keyframes <br />            区别：<br />                1. 过渡 transition 从一中状态到另一种状态，两个状态之间的改变； 需要使用事件触发<br />                2. 动画 animation 多种状态之间的改变， 不需要事件触发，可以自动执行； 定义 关键帧 定义动画 <br />                <br />        css3的 2d和3d变换: transform<br />            平移 translate()    translate3d(x, y , z)<br />            缩放 scale()    scale3d()  其中 scaleZ() 比较特殊，单独使用没有效果， 必须结合其他变换属性一起使用<br />            旋转 rotate()   rotate3d(x,y,z, angle) : x y z 一次代表坐标轴 取值 0（该坐标轴上不变换） 或者 1（该坐标轴上旋转变换） angle 变换的角度<br />            斜切 skew()

2d属性

2Dskew倾斜 变形

动画属性

2Dskew倾斜变形