关键词：
学习篇之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);
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)
css3过度属性，2d3d转换，动画
过度 transition(过度) transition-property:属性；设置需要过度属性一般设置为all(全部) transition-duration:1s； 设置过度花费的时间 transition-timing-function: linear； 设置过度效果的速度曲线。linear代表... 查看详情
css3转换
CSS3转换 版权声明：未经博主授权，内容严禁转载 什么是转换 转换时使元素改变形状、尺寸和位置的一种效果。 可以对元素应用2D或3D转换，从而对元素进行旋转、缩放、移动或倾斜。 2D转换：使元素在X... 查看详情
css3中怎样实现div的2d，3d旋转
参考技术Atranslate(x,y)定义2D转换。translate3d(x,y,z)定义3D转换。 查看详情
精通html5+css3需要学啥？
...辑器基本使用、HTML5新增标签、CSS3新增选择器及案例、2D转换及相关案例实现、3D转换和旋转木马案例等知识点。 一、vscode编辑器基本使用 vscode基本使用 vscode插件安装 二、HTML5新增标签 什么是HTML5 HTML5新... 查看详情
3d转换(代码片段)
3D转换CSS3允许您使用3D转换来对元素进行格式化。在本章中，您将学到其中的一些3D转换方法：rotateX()rotateY()点击下面的元素，来查看2D转换与3D转换之间的不同之处：2D旋转3D旋转它如何工作？转换是使元素改变形状、尺寸和位置... 查看详情
css3d转换
3D转换我们主要学习工作中最常用的3D位移和3D旋转主要知识点●3D位移:translate3d(x,y,z)●3D旋转:rotate3d(x,y,z)D●透视:perspective●3D呈现transfrom-style 6.23D移动translate3d3D移动在2D移动的基础上多加了一个可以移动的方向,就是z轴方向... 查看详情
css3d转换
3D转换我们主要学习工作中最常用的3D位移和3D旋转主要知识点●3D位移:translate3d(x,y,z)●3D旋转:rotate3d(x,y,z)D●透视:perspective●3D呈现transfrom-style 6.23D移动translate3d3D移动在2D移动的基础上多加了一个可以移动的方向,就是z轴方向... 查看详情
再次梳理css3动画部分知识
1、transform:适用于2D或3D转换的元素 transform-origin：元素的位置点css3转换（2D转换和3D转换）：可以对元素进行移动、缩放、转动、拉长或拉伸。2D转换：translate()、rotate()、scale()、skew()、matirx() &nb... 查看详情
css3学习——transform2d转换
...，查MDN只有Firefox支持该属性（我试的没效果）。CSS3中2D转换的实现用到两个属性：属性描述CSStransform向元素应用2D或3D转换。 查看详情
css33d转换
三维变换使用基于二维变换的相同属性。3D变换功能与2D变换功能相当类似，css3中3D变换主要有4个功能函数： 1、3D位移：CSS3中的3D位移主要包括translateZ()和translate3d()两个功能函数。 2、3D旋转：CSS3中的3D旋转主要包括rotate... 查看详情
css3新增特性
1、CSS3选择器2、CSS3边框(Borders)3、CSS3背景4、CSS3渐变5、CSS3文本效果6、CSS3字体7、CSS3转换和变形1）2D转换方法2）3D转换属性8、CSS3过度9、CSS3动画10、CSS3多列11、CSS3盒模型12、CSS3伸缩布局盒模型(弹性盒子)13、CSS3多媒体查询 查看详情
css3学习（圆角图片阴影背景渐变文本字体2d3d过渡等）
matrix CSS31. 圆角 border-radius：边框圆角的圆角半径 四个值：第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左 查看详情
前端学习html+css进阶(代码片段)
...签CSS3新增CSS3属性选择器结构伪类选择器伪元素选择器2D转换之translate2D转换之rotate2D转换之scale2D转换综合写法（顺序）动画动画的使用动画序列动画简写方式速度曲线属性CSS过渡transition3D转换三维坐标系3D转换属性3D移 查看详情
将 3D 转换转换为 2D
】将3D转换转换为2D【英文标题】：Converting3Dtransformationto2D【发布时间】：2017-08-2320:43:37【问题描述】：我正在尝试找出一种在OpenGL中将3D转换矩阵转换为2D的方法。我的z坐标被忽略（我正在处理地面投影）。这是我想要实现的一... 查看详情
如何使用fonepawvideoconverterultimate将2d电影转换为3d
FonePawVideoConverterUltimateMac版是一个2D到3D视频转换器，可以帮助您制作3D电影。FonePawVideoConverterUltimateMac支持14种3D模式，如并排3D、上下3D、红/青色立体3D视频格式，让您可以在标准2D电视上享受3D效果。想要将2D电影转换... 查看详情
css3转换
转换改变元素在页面中位置，大小，角度以及形状的一种方式2D转换：只在x轴和y轴上发生转换效果3D转换：增加了z轴的转换效果 一、转换属性transform取值： （1）none，默认值，无任何转换效果 （2）transform-f... 查看详情
css3学习——transform3d转换渲染
以下内容根据官方规范翻译，没有翻译关于SVG变换的内容和关于矩阵计算的内容。一般情况下，元素在一个无景深无立体感的平面（flatplane）上渲染，这个平面就是其包含块所处的平面。同时，页面上的其他元素也共享这个平面... 查看详情
css3--2d转换
这里使用了transform模块可以对元素进行移动、缩放、转动、拉长或拉伸。提供了以下方法：translate()rotate()scale()skew()matrix()translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。<!DOCTYPEhtml><htmllang="en... 查看详情