文章目录
1. 2D转换 transfrom
1.1 translate 平移 (px)
- translate(X,Y),translate3d(X,Y,Z)
- translate的百分比是根据自身来设置的
- 设置translate不会影响其他元素的排列
- 给行内元素设置没有效果
1.2 rotate 旋转 (deg),默认为Z轴
- 和平移配合使用时,一般先平移后旋转
1.3 transfrom-origin 旋转中心
1.4 scale 缩放,默认为Z轴
2. 过渡 transition
- transition-property:需要过渡的属性
- transition-duration:过渡时长
- transition-timing-function:过渡的运动曲线
- transition-delay:过渡的延迟
- 简写:transition: 谁来做过渡 过渡时长 运动曲线 过渡延迟 ;
3. 动画 animation
- animation-name:动画名称
- animation-duration:动画时长
- animation-timing-function:运动曲线
- linear: 匀速
- ease: 慢-快-慢 默认值
- ease-in: 慢-快
- ease-out: 快-慢
- ease-in-out: 慢-快-慢
- steps(),步长动画
- animation-delay:延迟时长
- animation-iteration-count:运动次数
- infinite:无限
- animation-direction:运动方向
- animation-fill-mode:动画等待或者结束的状态
- forwards:动画结束后,元素样式停留在 100% 的样式
- backwards:在延迟等待的时间内,元素样式停留在 0% 的样式
- both:同时设置了 forwards和backwards两个属性值
- animation-play-state:暂停与播放
- running:播放
- paused:暂停
- 复合写法:animation: 名称 时长 曲线 延时 运动次数 运动方向 等待或结束的状态;
- 也可以多动画使用逗号隔开
需要在css中定义动画函数
<style>
@keyframes 动画名 {
0% {}
50% {}
100% {}
/* 或者 */
from {}
to {}
}
</style>
4. 3D转换
4.1 3维坐标系
- x轴 水平向右
- y轴 垂直向下
- z轴 垂直屏幕
4.2 3d移动 translate3d
- transform: translate3d(x,y,z) 其中 x y z 分别指要移动的轴的方向的距离
4.3 景深 perspective
-
人在看物体时,有个规律,如 远的物体看起来小 近的物体看起来大
-
perspective 就是用来设置 人 和 物体 的距离
4.4 转换样式 transform-style
- 设置元素的子元素是位于 3D 空间中还是平面中
4.5 3d旋转 rotate3d
- transform: rotate3d(x, y, z, deg) 沿着自定义轴旋转 deg为角度
- 比如(1, 0, 0.5, 90deg),x轴为90度,y轴为0度,z轴为45度
- transform: rotate; 默认旋转z轴
4.6 3D缩放 scale3d
- transform: scale3d(1 ,1,2); 宽,高 缩放一倍,厚度放大两倍
- transform: scaleX(1); 只缩放宽
- transform: scaleY(1); 只缩放高
- transform: scaleZ(1); 只缩放厚
- transform: scale(0.5); 默认是缩放X和Y
4.7 视距原点 perspective-origin
- 和transfrom-origin一样只不过这个是3D的视角来看
原文地址:https://www.jb51.cc/wenti/3285712.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。