20200818岳浩天

知识

转换transform

2D转换

位移translate()：translate(x,y)指定元素在x轴和y轴上的位移

translate(x)和translateX(x) ： 指定元素在x轴上的位移

translateY(y)：指定元素在y轴上的位移

3D转换

透视距离：perspective

​ 定义：模拟人的眼睛到3D转换的元素之间的距离。距离不同，看到效果不同

3D旋转

rotateX(xdeg)：以x轴为中心，旋转元素 ，rotateY(ydeg)、rotateZ(zdeg)相同

rotate3D(1,1,1,45deg)：x,y,z取值为0表示不参与旋转，取值大于0，表示该轴参与旋转

3D位移

translateX(n) 指定元素在x轴上的位移，translateY(n)、translateZ(n)相同

translate3D(100px,100px,200px)：指定对象的3D位移。第1个参数对应X轴，第2个参数对应Y轴，第3个参数对应Z轴

3D缩放

scaleX(n)单独设置x轴缩放scaleY(n)、scaleZ(n)相同

scale3D(.5,.4,.8)指定对象的3D缩放。第1个参数对应X轴，第2个参数对应Y轴，第3个参数对应Z轴

transform-style：嵌套元素在3D空间显示

flat子元素将不保留其3d位置

preserve-3d子元素将保留其3d位置

transform-origin转换原点

1.以px为单位的数字

2.%

3.关键字（x:left/center/right、y:top/center/bottom）

取值个数

​ 2d：两个值，表示原点在x轴上和y轴上的位置

​ 3d：三个值，x,y,z轴上的位置

过渡

使css的值，在一段时间内平缓变化的效果。过度的代码要写在原本样式中，过渡效果有去有回，如果写在hover中，过渡效果有去无回

transition属性

transition-property检索或设置对象中的参与过渡的属性

支持过渡的属性：颜色、多数取值为具体数字的属性、阴影、transform、visibility

transition-duration检索或设置对象过渡的持续时间，取值以s/ms为单位的数字

transition-timing-function检索或设置对象中过渡的动画类型(过渡时间曲线函数)

transition-timing-function取值：

​ 关键字：ease默认值，慢开，中快，慢关

​ linear 全程匀速

​ ease-in慢开，快关

​ ease-out快开，慢关

​ ease-in-out慢速开始，慢速结束，中间先变快后变慢

​ 贝塞尔曲线：cubic-bezier(0.57.0.05.0.68.0.19)：自由落体

transition-delay检索或设置对象延迟过渡的时间

动画

声明动画@keyframes 名称{
0%{ /代码样式/ }
50%{ /代码样式/ }
100%{ /代码样式/ }
}

使用动画

animation-name: 动画名称

animation-duration: n s/ms设置动画执行时间

animation-delay: n s/ms延迟

animation-iteration-count:infinite播放次数 无线循坏

animation-direction:reverse播放顺序 倒序

animation-play-state鼠标悬停paused暂停

心得

今天学习的知识是我经常用到且感兴趣的，但是依旧有很多不熟悉的知识，练习的话，写华为官网让我对不熟悉弹性布局更加的熟练。