css3 CSS样式变换效果及动画

笔记总结

CSS的变换效果

transform 2d转换

translate（）进行平移效果，有2个参数对应X、Y轴。 scale()用于缩放标签，当参数只有一个时，整体放大和缩小，当参数是两个时，可以分别调整x、y轴的缩放倍数。 rotate（）用于旋转元素。rotateX() rotateY() rotateZ() 分别绕着xyz轴旋转 skew()有两个参数分别代表在x轴方向的扭曲程度，以及在y轴方向的扭曲程度。 matrix()把所有2D转换方法组合在一起。matrix()方法需要六个参数，包含数学函数，允许你：旋转、缩放、移动以及倾斜。 trabsform 3d转换

Perspective:同来控制视距的属性，属性值事指距离屏幕的像素值。（例Perpective:800px)transform-style:用来transform的显示效果，有平面模式（fiat）,3d模式（preserve-3d）transform-origin:用来控制旋转轴的位置 过渡效果 transition：默认是所有属性都进行过渡，参数列表（name|duration|delay）。 transition支持部分属性过渡，例如你可以指定宽高属性拥有过渡属性，这时其他属性将不再支持过渡。 动画效果 @keyframes用来设置动画效果，可以使用from和to定义开始动画和结束动画，也可以使用百分比控制整个动画的节奏

作业

实现代码

效果如下

推荐链接