3.css3的特效
1.2D转换
属性是transform
属性值 translate() rotate() scale() skew()
Translate 平移
语法 translate(x,y)
- 只有一个值 代表水平平移
- 2个值代表水平和垂直方向上平移的距离
- X和y可以为负值 负值代表正数的相反方向
- 兼容性的写法
Rotate 旋转
语法 transform:rotate()
- 参数必须是角度值30deg
- 沿着平面旋转 正数是顺时针旋转 负数是逆时针旋转
- 兼容性写法
Scale 缩放
语法 transform:scale()
- 参数是数字 1代表当前元素的一倍不变 大于1变大 小于1 变小
- 如果是一个参数 水平和垂直变化的值是一样
- 如果是两个值 水平一个 垂直一个
- 兼容性
Skew 拉伸
2.3d转换
- 这些平移 旋转等方法不在是围绕面 而是围绕轴
- 这些旋转元素的父级需要给予视距的属性 perspective
语法
1 transform:rotateX()
2.transform-origin:元素转换的位置 默认值是50% 50% 0 这个点
第一个值是x轴 第二个是y轴 第三个是z轴
Xy的值可以是单词left length % 但是z的值只能是length
3.Transform-style 规定被嵌套元素在3d空间中如何显示
值 flat 默认的 preserve-3d
4.perspective-origin:50% 50%; 元素转换所指向的方向，就是渐渐消失的那个方向。给的转换元素的父级
5.Perspective这个属性是视距的视距，是一种近大远小的效果
6.backface-visibility visible(背面可见） hidden 背面不可见
3.transition 过渡
上面是transition的简写 最后一个是延迟 即便是0也得加单位s
4.动画 animation
Animation:name duration timing-function delay iteration-count direction
Animation-play-state:paused;动画停止
Animation-fill-mode:forwards;动画完成停留在末尾，不返回原来的位置。
@keyframes 用来定义动画
语法 @-webkit-keyframes 动画名{0{}100%{}}
原文地址：https://www.cnblogs.com/txf-123/p/10827420.html