css3 字体、2D转换、3D转换

学习篇之CSS3 字体、2D转换、3D转换

一、字体

@font-face

将字体文件存放到 web 服务器上，通过CSS3 @font-face规则中定义，它会在需要时被自动下载到用户的计算机上。

@font-face {
　　font-family: myFonts;//定义字体名称
　　src: url(myFonts.ttf), url(myFonts.eot), url(myFonts.otf);//字体文件来源 可选.ttf、.eot、.otf等三种格式文件
}

PS：为了兼容不同浏览器最好提供多个不同文件格式的字体文件

二、2D转换

1、transform

transform兼容性：为了兼容大部分主流浏览器，需要添加相应前缀。如下所示，后续文档不重复表述。

transform: scale(2,4);
-ms-transform: scale(2,4);    /* IE 9 */
-webkit-transform: scale(2,4);    /* Safari 和 Chrome */
-o-transform: scale(2,4);    /* Opera */
-moz-transform: scale(2,4); /* Firefox */

translate(30px,60px) 平移

元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数

transform: translate(50%, 50%);//基于正常文档流位置移动，可用于垂直居中div

scale(2,4) 缩放

元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数

transform: scale(2,4); //宽度放大为原来的2倍、高度放大为原来的4倍

rotate(30deg) 旋转

元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转

transform: rotate(30deg);//顺时针旋转30度

skew(30deg, 60deg)

元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数、

transform: skew(30deg, 60deg);//基于x轴翻转30度，y轴翻转60度

matrix(a,b,c,d,e,f)

matrix() 方法把所有 2D 转换方法组合在一起。

matrix() 方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。

通俗理解，通过矩阵转换求出新的坐标(x^', y^')来达到元素旋转、缩放、移动以及倾斜等效果。

其中ax+cy+e是水平坐标，bx+dy+f为垂直坐标

2、transform-origin

允许您改变被转换元素的位置。

2D 转换元素能够改变元素 x 和 y 轴。3D 转换元素还能改变其 Z 轴

transform-origin: x-axis y-axis z-axis;

三、3D转换

translate3d(x,y,z)

translateX(30px)
translateY(60px)
translateZ(30px)

scale3d(x,y,z)

scaleX(2)
scaleY(4)
scaleZ(0.5)

rotate3d(x,y,z)

rotateX(30deg)
rotateY(60deg)
rotateZ(0deg)

matrix3d(a,b,c,d,e,f,g,h,i,j,k,l)