H5 css3特效

Posted 2021-11-28 txf-123

3.css3的特效

1.2D转换

属性是transform

属性值 translate() rotate() scale() skew()

Translate 平移

语法 translate(x,y)

1. 只有一个值 代表水平平移
2. 2个值代表水平和垂直方向上平移的距离
3. X和y可以为负值 负值代表正数的相反方向
4. 兼容性的写法

 

Rotate 旋转

语法 transform:rotate()

1. 参数必须是角度值30deg
2. 沿着平面旋转 正数是顺时针旋转 负数是逆时针旋转
3. 兼容性写法

 

Scale 缩放

语法 transform:scale()

1. 参数是数字 1代表当前元素的一倍不变 大于1变大 小于1 变小
2. 如果是一个参数 水平和垂直变化的值是一样
3. 如果是两个值 水平一个 垂直一个
4. 兼容性

 

Skew 拉伸

 

2.3d转换

1. 这些平移 旋转等方法不在是围绕面 而是围绕轴
2. 这些旋转元素的父级需要给予视距的属性 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%{}}