海阔天空

手机扫码查看

过渡transition
transition-property 规定设置过渡效果的 CSS 属性的名称。
transition-duration 规定完成过渡效果需要多少秒或毫秒。
transition-timing-function 规定速度效果的速度曲线。
transition-delay  定义过渡效果何时开始。
语法：
transition:property duration timing-function delay;

使用方法：
div{
width:100px;
height: 100px;
background-color:red;
border: 1px solid red;
transition:width 2s;}
div:hover{width:200px;background-color: blue;}
如果让宽和背景同时生效，把width改成all

2d翻转效果之transform
transform参数有
rotate(30deg)顺时针旋转30度
translate(x,y)x，y轴移动，单位px
scale(x,y)x，y轴缩放，单位数字
skew(x,y) x，y轴倾斜
基点的位置transform-origin
transform-origin:(x,y,z)x和y属于2d，z属于3d效果

动画animation
animation-name 规定需要绑定到选择器的 keyframe 名称
animation-duration 规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function 规定动画的速度曲线。
animation-delay 规定在动画开始之前的延迟。
animation-iteration-count 规定动画应该播放的次数。
animation-direction 规定是否应该轮流反向播放动画。
语法：
animation: name duration timing-function delay iteration-count direction;

animation-fill-mode 属性规定动画在播放之前或之后
none 不改变默认行为。
forwards 当动画完成后，停到结束位置。
backwards 在延迟情况下，让0%在延迟前生效
both 前两者同时生效

animation-direction 属性定义是否应该轮流反向播放动画。
normal 默认值。动画应该正常播放
alternate 动画应该轮流反向播放。
reverse 永远都是反向

3D属性
rotateX(): 正值向上翻转
rotateY(): 正值向右翻转
translateZ(): 正值向前，负值向后
scaleZ(): 立体元素的厚度

3D写法
scale3d(x,y,z);放大
translate3d(x,y,z)移动
rotate3d(x,y,z,deg)四个值
0/1(x轴是否添加旋转角度)
0/1(y轴是否添加旋转角度)
0/1(z轴是否添加旋转角度)
deg就是角度值
perspective：屏幕离元素的距离，值越大幅度越小
perspective-origin: 景深-基点位置，观察元素的角度
transform-origin:x y z(z轴不能写单词，只能写数值)

3d空间transform-style
参数：flat(默认值2d)、preserve-3d(3d，产生一个三维空间)
backface-visibility: 背面隐藏
参数：hidden、visible(默认值)