1.transform 变形
- rotate(30deg) 顺时针旋转30度 【是负数的话就是逆时针旋转】
- rotate3d(x,y,z,30deg) 3d旋转
- rotateX(30deg) 沿着x轴的进行30度的旋转
- rotateY(30deg) 沿着y轴的进行30度的旋转
- rotateZ(30deg) 沿着z轴的进行30度的旋转
- translate(100px,50px) x轴平移100px,y轴平移50px。【当只有一个值的时 候，y轴的值为0. 负数就是反方向移动 】
- translate3d(100px,50px,20px) 3d转换
- translateX(100px) x轴平移100px
- translateY(100px) y轴平移100px
- translateZ(100px) z轴平移100px
- scale(2,1.2) 大于1就是放大，小于1就是缩小。【如果只有一个值，就是缩放同样倍数大小】
- scale3d(2,1.2,1.5) 3d缩放
- scaleX(1.2) x轴(水平方向)缩放元素
- scaleY(1.5) y轴(垂直方向)缩放元素
- scaleZ(1.5) z轴缩放元素
skew(30deg,10deg) X轴和Y轴同时按一定的角度值进行扭曲变形【如果只有一个值，就是y轴上不扭曲变形】
skewX(15deg)X轴扭曲变形
skewY(20deg)Y轴扭曲变形
Document
- transition 动画属性
ease 逐渐变慢 默认值
linear 匀速
ease-in 加速
ease-out 减速
ease-in-out 加速在减速
transition([需要改变元素的什么属性] [执行时间] [什么动画来完成] [延迟触发时间(可选)])
执行时间必填，不然没有效果
Document
transition改变多个属性值只需在后面加个逗号
Document
animations 动画
- animations动画需要@keyframes关键帧
- 语法 animation:绑定到选择器的 keyframe 名称（必填） | 动画所花的时间（必填）|动画形式 | 延迟时间 | 播放次数 | 是否轮流反向播放动画
animation: name duration timing-function delay iteration-count
direction;
来自 “ ITPUB博客 ” ，链接：https://blog.itpub.net/1512/viewspace-2798591/ ，如需转载，请注明出处，否则将追究法律责任。
请登录后发表评论
登录
全部评论
