【郑州校区】CSS笔记第四天
九、转换 1、2D转换 transform:用来设置2D或3D转换 转换可以实现元素的位移、旋转、变形、缩放,甚至支持矩阵方式 ①移动 translate(x, y) 改变元素的位置,相对原来的位置的变化,如果为百分比则是相对于盒子的大小; translate3d(x,y,z) 3d空间的位置移动 ②缩放 scale(x, y) 水平和垂直方向的缩放,x、y的取值可为小数,如果只有一个参数即缩放的倍数; ③旋转 rotate(deg) 可以对元素进行旋转,正值为顺时针,负值为逆时针;旋转时元素的坐标也会跟着改变 ④倾斜 skew(Ydeg, Xdeg) 可以使元素按一定的角度进行倾斜,会改变元素的形状 ⑤矩阵变换matrix(x, y) 改变元素的位置 2、3D转换 (1)3D坐标轴 用X、Y、Z分别表示空间的3个维度,三条轴互相垂直。如下图 (2)3D呈现 transform-style:preserve-3D; 内嵌元素,并且必须经过Z变形(transform) 透视 perspective :辅助性帮我们去理解元素在转换过程中的视觉效果 (0-1000)设置给父盒子,值越大,效果越不明显,看起来近大远小 3、backface-visibility 设置元素背面是否可见 十、动画1、定义动画序列: a、通过@keyframes指定动画序列名称,主要先定义再调用; b、通过百分比将动画序列分割成多个节点;(0%-100%、from-to) c、在各节点中分别定义各属性 d、通过animation将动画应用于相应元素; 2、调用:animation a、animation-name设置动画名称 b、animation-duration动画持续时间 c、animation-delay动画延时时间 d、animation-timing-function动画执行速度,linear(匀速)、ease等 e、animation-play-state动画播放状态,play、paused(暂停)、running等 f、animation-direction动画播放方向,默认值normal,alternate动画逆播(动画先正向播放再反向播放) g、animation-fill-mode动画执行完毕后状态,forwards(结束时的状态)backwards(执行之前的状态)等 h、animation-iteration-count动画执行次数,infinite(无限次)等 i、steps(60) 表示动画分成60步完成 更多 传智播客·黑马程序员郑州校区地址 河南省郑州市 高新区长椿路11号大学科技园(西区)东门8号楼三层 联系电话 0371-56061160/61/62 来校路线 地铁一号线梧桐街站A口出
|