html5+css3字体图标、平面转换以及渐变

水平位移

transform:translate(水平移动距离,垂直移动距离) 

css属性有层叠性，写多行只能生效最后一行

技巧:

• translate()如果只给出一个值，表示x轴的移动方向
• 单独设置某个方向的移动距离：translateX（）&translateY（）

位移-绝对定位居中

​ 当需要子盒子在父盒子中居中时，需要用到句对定位，子盒子可以这样写：

.son{
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
    /*位移：百分比参考了子盒子自身尺寸的计算结果。*/
	width:auto;
	height:auto;
}

旋转

目的：使用rotate实现元素旋转效果

语法：

transform:rotate(角度);

角度的单位是deg

旋转效果必须包含过渡（transition）

技巧：取值正负均可

平面-转换原点

目标：使用transform-origin属性改变转换原点。

语法：

• 默认原点是盒子中心点
• transform-origin：原点水平位置 原点垂直位置；（用空格隔开）

取值

• 方位名词（left、top、right、bottom、center）

注意：该属性添加给标签本身，不要添加给hover。

多重转换

目标：使用transform复合属性实现多重转换效果

语法：

transform:translate() rotate();/*旋转会改变坐标轴朝向，所以这两个不能反 -- 多重转换如果涉及到旋转，则应该往最后书写*/

缩放

目标：使用scale改变元素尺寸

语法：

transform:scale(x轴缩放倍数,y轴缩放倍数)

缩放可以用倍数来实现：、

transform:scale(1.5)/*不需要单位*/

渐变背景

目标：实现background-image属性实现渐变效果

• 渐变是多个颜色逐渐变化的视觉效果
• 一般用于设置盒子的背景

background-image:linear-gradient(color1,color2);

企业中常用的渐变为半透明渐变：

background-image:linear-gradient(transparent,rgba(0,0,0,.6));

.mask表示遮罩层。