2D转换
transform 2D转换
- translate(px,px) 平移
- rotate(deg) 角度旋转
- scale(1,1)放大倍数
- skew(x-deg,y-deg)旋转 沿坐标轴旋转
transition过度效果
- transition:all 2s ease 2s
(变化样式,持续时间,速度,延迟) - 速度
linear 匀速
ease 变慢
ease-in 加速
ease-out 减速
cubic-bezier(n,n,n,n) 贝塞尔曲线
3D转换
- rotateX(90deg);
- rotateY(90deg);
- rotateZ(90deg);
动画
声明动画
|
|
使用动画animation:
- animation: name 2s esae-in infinite alternate
(name 持续时间 速度 延迟 次数-无限次 反向)
1、页面加载时,自动执行
2、执行次数可自定义
3、可重复调用
|
|
按键动画
按钮按下弹起效果,通过设置阴影实现
按下时让阴影面积缩小,按钮向下移动5px
|
|
照片墙
- transform-origin: right;
位置,以哪个边或哪个角旋转 - transform: rotate(-30deg);
旋转