H5 css3特效

标签：rds   mod   旋转   min   pre   ansi   第一个   cti   返回   

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%{}}

H5 css3特效

标签：rds   mod   旋转   min   pre   ansi   第一个   cti   返回   

原文地址：https://www.cnblogs.com/txf-123/p/10827420.html