移动web之2D位移

1:先来了解一下字体图标:

2:使用字体图标:

◆:引入相关文件:

◆:引入css:

3:使用类名引入字体图标:

◆:第一个类名iconfont 目的是告诉这个盒子里面的文字是字体图标 .不是普通的文字

◆:第二个类名 icon-daohangizhi ,告诉盒子到底使用那个小图标

 4:使用Unicode编码:

也可以在标签内部放入一个编码

html标签:

 css 要指定当前标签的文字是字体图标 :

 5:使用伪元素字体图标:

使用伪元素字体图标 ,一定要声明 .font-family:"iconfont"

 6:1:字体图标引入线上地址也可以:

2:通用: 

                                   接下来是重点了呦:

7:变形transform (2D)

translate  可以让盒子在平面内的形态沿着X轴 或者Y轴来移动

 移动的时候可以写百分比 如果使用的百分比 ,移动的是盒子自身的宽度

 让一个盒子水平居中和垂直居中: (很简单:重点呦)

                                        接下来给大家做一个案列:

开门大吉:

效果:

 语法:

                                   再来一个小知识点:

怎么设置中心点:   transform-origin

          多个值之间要用空格隔开呦!     切记 !!!    切记!!!   切记!!!

    

                     今天就先分享到这里哦 !  更多精彩请听下回分解 !