2020-11-17

精灵图

background-position:属性  属性

调动图片位置显示小图标

过渡

transition：过渡/功能：实现元素不同状态之间的平滑过渡。未添加时元素快速跳到hover，直接切换，从开始到状态结束瞬间完成，中间过程无法查看。
格式：transition:过渡的属性 完成的时间（s） 运动曲线 延迟时间
过渡属性： 发生变化时，想要有过渡的效果的属性，all：全属性。
完成时间： 单位是秒s或者毫秒ms。
运动曲线： linear:匀速 ，ease:减速，ease-in:加速，ease-in-out：先加速后减速。
延迟时间： 单位是秒，过渡多级后生效，冲结束状态返回到开始状态时也会生效。
也可以拆分成四个小属性入下： transition-property /transition-duration /transition-timing-funct /transition-delay.

2D转换缩放

transtorm:scale(水平方向的缩放倍数 垂直方向的缩放倍数)

取值：大于1为放大，小于一为缩小。一般不能为负数。

2D位移

transform:translate(水平偏移量，垂直偏移量)

参数：向右和向下。负值反方向。百分比是指盒子本身的宽高*百分比。

绝对定位居中

transform:translaqte(百分比  百分比)

倾斜

transform:skew(水平倾斜角度 ，垂直倾斜角度)

单位：deg 角度/正值：顺时针 /负值：逆时针。

2D旋转

transform:rotate(角度)

让盒子进行旋转，单位：角度deg，正值为顺时针，负值为逆时针。
transform:可以多个2D转换，中间用空格隔开。
当rotate和ranslate在一起时注意书写顺序：rotate在前时，先旋转自身，再按旋转角度进行位移。
ranslate在前时先进行位移，在进行旋转自身。
可以设置旋转的中心点，不设置默认·为中心。

样式  transform-origin:(属性  属性)

属性值：px 英文 （left，centor，right,top,bottom）百分比
其中百分比是按照自身宽高*百分比计算的。
当只写一个值的时候，第二个值默认为center。

3D转换

perspectire:透视：加给变换盒子的父盒子，设置的用户的眼睛与平面的距离，透视只是视觉上呈现，不是真正的3D。
3D样式：transtorm:rotate 轴可以为XYZ（角度） 当盒子旋过背面时，隐藏：backtace-visibility:hidden