学习总结

1.转换

多个转换函数之间用空格隔开

平移translate(x,y)同时设置元素在x轴和y轴上的平移

缩放scale(n)，当n为负值时，元素反转

旋转rotate(ndeg)，n为正数时，元素顺时针旋转n度，n为负数时，元素逆时针旋转

倾斜skew(ndeg)，等同于skewX(ndeg)，n为正，y轴逆时针倾斜；skewY(ndeg)，n为正，x轴顺时针倾斜

perspective透视距离，模拟人眼到3d转换的元素之间的距离，取值为以px为单位的数字，注意此属性添加在3d转换的父元素身上

transfrom-style设置子元素在3d空间的显示方式，flat默认值，不保留3d位置，preserve-3d保留3d位置

transfrom-origin设置转换原点

2.过渡

transition:property duration timing-function delay过渡属性简写

第一个属性是设置支持过渡的属性，默认all,多个属性之间用空格分隔

第二个属性是设置过渡的持续时间

第三个是设置过渡动画速度，ease默认值，开始结束相对匀速漫，中间相对匀速快；linear匀速；ease-in开始慢，结束快；ease-out开始快，结束漫；ease-in-out开始慢后快再慢；cubic-bezier(n,n,n,n)n为0~1的的数字，cubic-bezier(0.57.0.05.0.68.0.19)：自由落体

第四个属性为延迟过渡的时间

3.动画

animation : name duration timing-function delay count direction动画简写

name是定义的动画名称

count是动画播放的次数，无单位数字或者infinite无限

其他属性和过渡类似

animation-direction动画播放的顺序，normal正常播放，reverse逆序播放，alternate正逆轮流播放

animation-fill-mode动画播放之间和之后的状态，backwards将第一帧加入元素播放之间，forwards将最后一帧加入元素播放之后，none默认值，保持元素播放为播放时的状态，both同时设置backwards和forwards

animation-play-state鼠标悬停，动画状态，running默认值，继续播放，paused暂停

4.背向隐藏

backface-visibility设置背向隐藏样式，visible背面可见，hidden背面不可见

心得体会

css终于要学完了，但是学完不代表用的好，综合使用是一个考验，今天老师叫同学上去讲，其中一个同学讲到使用纯css做到点击内容的切换，用到了为了选择器中的状态伪类 选择器:checked 设置单选或复选按钮被选中的状态，启发很大，当时讲到这块内容时，就这样过去了，完全没有想到这样的用法，希望平时自己也能多多思考，更加深入的认识和了解知识。