过渡与变换

# 过渡

是在元素的状态切换中,改变元素的样式，并通过一段时间进行变换

- 过渡设置的样式  

1.过渡属性的名称(必须设置的属性):transition-property:变换的样式名;如width

2.过渡的时间(必须设置的属性)    :transition-duration:时间；时间单位 秒或者毫秒

3.过渡的方式:

先慢再快最后慢 默认

transition-timing-function: ease;

先慢越来越快

transition-timing-function: ease-in;

先快越来越慢

transition-timing-function: ease-out;

先慢 再匀速 再慢

transition-timing-function: ease-in-out;

匀速

transition-timing-function: linear;

   

4.过渡的延迟时间:transition-delay: 3s;

5.简写方式(重点):transition:过渡时间 延迟时间 过渡方式 过渡样式

过渡时间和延迟时间是不可调整的

多重过度:transition:第一个过渡样式 过渡时间 延迟时间 过渡方式,过渡样式 过渡时间 延迟时间 过渡方式;用逗号连接多组过渡

无法过渡的样式:值无法做到过渡效果就会瞬间变化,如:display:显示和消失

# 变换

css3新出的属性，利用变换函数，改变元素

- 三个轴

x、y、z

2d空间、3d空间

- transform变换函数

1.位移

1.1在2D平面中只有两个方向:x轴、y轴

transform:translateX(位移的长度)

x轴正值向右移动 负值向左移动

transform:translateY(位移的长度)

x轴正值向下移动 负值向上移动

transform:translate:(X轴位移长度,Y轴位移长度)

(1)位移和外边距及定位

外边距会影响其他

定位会脱离文档流(绝对)

位移不脱离文档流不影响其他元素

1.2在3D空间中有三个方向：x轴、y轴、z轴

transform:translateZ(位移的长度)正值向前移动 负值向后移动

所有元素都是正面(内容)朝前方

2.旋转

在2D平面只有在Z轴方向

transform:rotate(角度)默认z轴

transform:rotateZ(角度)

旋转正值成顺时针,负值逆时针

在3D空间有:x轴和y轴

transform:rotateX(角度)

transform:rotateY(角度)

有透视的时候效果明显

3.缩放

transform:scaleX(-1);X轴的缩放

transform:scaleY(-1);Y轴的缩放

transform:scale(-2);没有指定xy的，默认一个值时两方向使用同样的值

值:没有单位的数字，默认值1

比1大就是原大小的多少倍 如:2倍就是2倍

0就是没有大小 最终元素会消失，缩小到0 的大小

缩小的值0~1之间

负值，负号出现代表该方向镜面翻转值代表放大和缩小的倍数

数值也起作用

4.扭曲

transform:skewX(40deg)

正方向,水平方向,左上角横向向左拉扯,右下角横向向右拉扯

负角度,水平方向,与正方向相反

transform:skewY(40deg)

正方向,垂直方向,左上角竖向向上拉扯,右下角竖向向下拉扯

负角度,垂直方向,与正方向相反

transform:skew(40deg);默认x轴

5.变换函数的执行顺序

多个变换函数一起使用是 需要空格连接 但前后有顺序

6.元素变换时的基点

当元素变换属性做变换时，变换的中心变成了元素的中点

transform-origin:x轴位置y轴位置;

值：

关键词:top,left,right ,bottom

长度值：px

百分比：指的是自己的宽度和高度

# 透视

1.perspective;长度值；透视距离，模拟人眼到3D变换元素之间

值越小,人眼离元素最近，元素显得越大

值越大,人眼离元素最远，元素显得越小

# 构建空间

transform-style:preserve-3d;将元素构成3D空间

transform-style:flat;默认平面显示,只有父元素构建了3D空间,子元素的3D变换效果才明显可见