CSS3第四天

时间：2018-01-26 12:41:43 阅读：125 评论：0 收藏：0 [点我收藏+]

标签：from 完成 img 分享图片 ffffff back sla 坐标维度

九、转换
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 :辅助性帮我们去理解元素在转换过程中的视觉效果br/>(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步完成

CSS3第四天

标签：from 完成 img 分享图片 ffffff back sla 坐标维度

原文地址：http://blog.51cto.com/13517854/2065349

踩

(0)

评论一句话评论（0）