一、精灵图片
给div插入背景图片，通过定位调整背景图片到相应的位置。
二、过渡
功能
实现元素不同状态之间的平滑过渡。
以往学习的是：元素->hover状态 直接切换，从开始状态到结束状态，瞬间完成，中间过程几乎无法查看。
三、trasition的格式
过渡属性：
数值型的属性才可以设置过渡。
width,height,color,font-size
transition-property 过渡属性：发生变化时，想要有过渡效果的属性。all，全属性。
完成时间：
transition-duration 完成时间：单位是s/ms。
运动曲线：
transition-timing-function 运动曲线：
linear 匀速
ease 减速
ease-in 加速
ease-in-out 先加速后减速
延迟时间：
单位是s 默认为0 过渡多久后生效。 从结束状态返回到开始状态时，也会生效。
四、2D转换缩放
格式：
transform:scale(水平方向的缩放倍数,垂直方向的缩放倍数)
取值：大于1表示放大，小于1缩小。
五、2D位移
格式：
transform:translate(水平偏移量，垂直偏移量)
参数：
正值：向右和向下 负值：反方向。
百分比。盒子本身的宽高*百分比
六、绝对定位的居中
transform:translate( , )
七、小火箭练习
八、倾斜
transform:skew(水平倾斜角度，垂直倾斜角度)
单位：deg 角度
正值：顺时针，负值：逆时针。
九、旋转
设置旋转的中心点：
属性值：px 英文（left center right top bottom） 百分比
百分比是按照自身宽高*百分比计算的。
只写一个值，第二值默认为center。
让盒子进行旋转：
格式：
transform: rotate(角度);
单位：deg 正值为顺时针，负值为逆时针。
transform 可以书写多个2D转换，中间用空格隔开。
当rotate和translate在一起的时候，注意书写顺序。
rotate在前，先旋转自身，再按照旋转的角度，进行位移。
translate在前，先进行位移，再旋转自身。
十、3D转换
/* 透视：
加给变换盒子的父盒子
设置的用户的眼睛与平面的距离。
透视只是视觉上的呈现，不是真正的3D。