CSS3-2d3d
1、过渡(transition)操作谁,给谁加过渡
transition:要过渡的属性 花费时间 运动曲线 何时开始; 多组属性变化,还是用 逗号 隔开
transition-property:规定应用过渡的CSS属性的名称。
transition-duration:定义过渡效果花费的时间,默认是0。
transition-timing-function:规定过渡效果的时间曲线,默认是ease
linear:匀速 ease:逐渐慢下来 ease-in:加速 ease-out:减速 ease-in-out:先加速后减速
transition-delay:规定过渡效果何时开始,默认是0
简写:transition:all 0.5s; // 所有的属性执行过渡 花费0.5秒的时间
2、变形(transform)
1.位移(translate(x,y))
transform:translateX(x); // 仅水平方向移动
transform:translateY(y); // 仅垂直方向移动
transform:translate(20px,10px); // 向右向下分别平移20px,10px
2.缩放(scale(x,y))
transform:scaleX(x); // 仅水平方向缩放
transform:scaleY(y); // 仅垂直方向缩放
transform:scale(0.5,0.5); 元素x,y方向缩小0.5倍
3.旋转(rotate(deg))
对元素进行旋转,正值顺时针,负值逆时针
transform:rotate(180deg); // 顺时针旋转180度
transform-origin:top right; // 可以调整元素转换变形的原点 默认中心点 旋转 ,如果想要精确位置,可以用 px 像素
4.倾斜(skew(deg,deg))
transform:skew(30deg,0deg); // 通过 skew 方法把元素水平方向向上倾斜30度,垂直方向不变。
5.3D变形(transform(x,y,z))
x 左边是负值,右边是正值
y 上面是负值,下面是正值
z 里面是负值,外面是正值
transform:rotateX(180deg); // 围绕X轴旋转
transform:rotateY(180deg); // 围绕Y轴旋转
transform:rotateZ(180deg); // 类似普通旋转
6.透视(perspective)
perspective 一般作为一个属性,设置给父元素作用于所有3D 转换的子元素
perspective:500px; // 透视原理:近大远小
在透视效果中 transform:translateZ(300px); // z值越大(接近透视的值),看到的物体越近,物体越大
3D效果提供一种综合写法:
transform:translate3d(x,y,z); // 其中x,y轴单位可以是px,也可以是%,但是 z 轴只能是 px
7.backface-visibility:当元素不面对屏幕时是否可见(一般用于两个盒子翻转)
8.动画效果(animation)