本页目录： <a href="#id1">怎么使用</a>
<ul>
<li><a href="#id11">平移函数 translate()</a></li>
<li><a href="#id12">旋转函数 rotate()</a></li>
<li><a href="#id13">缩放函数 scale()</a></li>
<li><a href="#id14">倾斜函数 skew()</a></li>
<li><a href="#id15">矩阵操作 matrix()</a></li>
</ul>
<a href="#id2">浏览器支持</a>
CSS3 新增的 2D 变换属性： 通过 CSS3 转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。
<a href="" id="id1"></a>
<h2 class="group flex justify-start items-center">怎么使用<a name="怎么使用" aria-label="Anchor" id="怎么使用" class="inline-flex justify-center items-center w-6 h-6 ml-4 text-base rounded-sm bg-gray/100 decoration-transparent invisible group-hover:visible" href="#怎么使用">#</a></h2><a href="" id="id11"></a>
<ol>
<li>**translate()**：设置元素相对于当前的位置。 语法： <code>transform: translate(length,length);</code>
<ul>
<li>设置元素基于当前位置向右向下偏移。</li>
<li><code>length</code> 偏离的距离数据。 示例： <code>transform: translate(50px,100px);</code> <img src="https://ws1.sinaimg.cn/large/006tNbRwgy1fuockbel15j30ai0euwey.jpg" alt="">
<a href="" id="id12"></a></li>
</ul>
</li>
<li>**rotate()**：将元素进行顺时针旋转，旋转中心<code>transform-origin</code>进行设置，默认为元素中心 语法： <code>transform: rotate(rot);</code>
<ul>
<li><code>rot</code> 元素顺时针转动的角度数据。 示例： <code>transform: rotate(30deg);</code> <img src="https://ws4.sinaimg.cn/large/006tNbRwgy1fuockq1b1rj308i0aggmc.jpg" alt="">
<a href="" id="id13"></a></li>
</ul>
</li>
<li>**scale()**：使用 scale 方法来实现文字或图像的缩放处理 语法： <code>transform: scale(times);</code>
<ul>
<li><code>times</code> 数字，表示相对于当前元素缩放的倍数。可以有两个参数，表示长宽。 示例： <code>transform: scale(0.5, 2);</code> <img src="https://ws4.sinaimg.cn/large/006tNbRwgy1fuoclaoa1uj30fa0lqjsf.jpg" alt="">
<a href="" id="14"></a></li>
</ul>
</li>
<li>**skew()**：使用 skew 方法来实现文字或图像的倾斜处理，默认坐标中心在元素中心 语法： <code>transform: skew(rot);</code>
<ul>
<li>参数中分布指定水平方向上的倾斜角度与垂直方向上的倾斜角度。第一个围绕 X 轴，第二个围绕 Y 轴</li>
<li><code>rot</code> 一方向的倾斜角度。 示例： <code>transform: skew(30deg, 30deg);</code> <img src="https://ws1.sinaimg.cn/large/006tNbRwgy1fuocmattrhj30880a4jrw.jpg" alt="">
<a href="" id="15"></a></li>
</ul>
</li>
<li>**matrix()**：矩阵操作。matrix() 方法可以把所有 2D 转换方法组合在一起 语法： <code>transform: matrix(a,b,c,d,e,f);</code>
<ul>
<li>实际上，这 6 参数，对应的矩阵如下： 注意书写方向是竖着的 <img src="https://ws1.sinaimg.cn/large/006tNbRwgy1fuoak0zwuhj304302kq2w.jpg" alt=""></li>
<li>进行运算： <img src="https://ws1.sinaimg.cn/large/006tNbRwgy1fuoaq82zpxj30cm02xwep.jpg" alt=""> 坐标就从[x,y]变成了[ax+cy+e,bx+dy+f]</li>
<li>关于为什么要<code>3*3</code>的矩阵？ 主要是为了统一用矩阵乘的操作，其实平移只需要<code>2*2</code>，为了统一利用<code>3*3</code>乘法变相实现加法(平移)效果。具体思想参考计算机图形学 示例： <code>transform: matrix(1, 0, 0, 1, 30, 30);</code>根据运算，可以得出此矩阵可以将元素向右下平移[30,30]</li>
</ul>
</li>
</ol>
<h2 class="group flex justify-start items-center">浏览器支持<a name="浏览器支持" aria-label="Anchor" id="浏览器支持" class="inline-flex justify-center items-center w-6 h-6 ml-4 text-base rounded-sm bg-gray/100 decoration-transparent invisible group-hover:visible" href="#浏览器支持">#</a></h2><img src="https://ws4.sinaimg.cn/large/006tNbRwgy1fuo7z8j9byj318s04s3zs.jpg" alt=""> Chrome 和 Safari 需要前缀 -webkit- Internet Explorer 9 需要前缀 -ms-

CSS3-2D转换

CSS3 新增的动画属性： 通过 CSS3 动画，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画 以及 JavaScript。作为页面切换的交互动画。
NOTE：
<ol>
<li>一个元素要使用多个动画时（比如前一秒动画 1，后面动画 2），可以在 css 属性中用一个 animation 表示，动画之间用逗号相隔。例子：<code>animation: animation1 1s, animation2 1s 1s infinite alternate ;</code></li>
</ol>
<h2 class="group flex justify-start items-center">怎么使用<a name="怎么使用" aria-label="Anchor" id="怎么使用" class="inline-flex justify-center items-center w-6 h-6 ml-4 text-base rounded-sm bg-gray/100 decoration-transparent invisible group-hover:visible" href="#怎么使用">#</a></h2>首先用我的话来大致概括一下 css3 动画的使用流程：
<ol>
<li>首先定义一个动画，使用<code>@keyframes</code>来定义动画(包括动画名、动画过程状态)</li>
<li>在一个元素的 class 中引用刚定义的动画，设定相关参数(动画时长、动画线性、动画延迟、元素开始和结束的状态、动画是否暂停)</li>
</ol>
这样一个 css3 动画就被定义和使用了。
<a href="" id="id11"></a>
<h4 class="group flex justify-start items-center">1. 定义动画<a name="1.-定义动画" aria-label="Anchor" id="1.-定义动画" class="inline-flex justify-center items-center w-6 h-6 ml-4 text-base rounded-sm bg-gray/100 decoration-transparent invisible group-hover:visible" href="#1.-定义动画">#</a></h4><h4 class="group flex justify-start items-center">语法：<a name="语法：" aria-label="Anchor" id="语法：" class="inline-flex justify-center items-center w-6 h-6 ml-4 text-base rounded-sm bg-gray/100 decoration-transparent invisible group-hover:visible" href="#语法：">#</a></h4><ul>
<li><code>@keyframes</code> @keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能作为动画中某一帧的状态。 示例： 规定一个名叫<code>myAnimation</code>的动画
<pre><code class="hljs language-css">@keyframes myAnimation {
 0% {
 background: red;
 }
 25% {
 background: yellow;
 }
 50% {
 background: blue;
 }
 100% {
 background: green;
 }
}

@-moz-keyframes myAnimation /* Firefox */ {
 0% {
 background: red;
 }
 25% {
 background: yellow;
 }
 50% {
 background: blue;
 }
 100% {
 background: green;
 }
}

@-webkit-keyframes myAnimation /* Safari 和 Chrome */ {
 0% {
 background: red;
 }
 25% {
 background: yellow;
 }
 50% {
 background: blue;
 }
 100% {
 background: green;
 }
}

@-o-keyframes myAnimation /* Opera */ {
 0% {
 background: red;
 }
 25% {
 background: yellow;
 }
 50% {
 background: blue;
 }
 100% {
 background: green;
 }
}</code></pre></li>
</ul>
<a href="" id="id12"></a>
<h4 class="group flex justify-start items-center">2. 引用动画，设定参数<a name="2.-引用动画，设定参数" aria-label="Anchor" id="2.-引用动画，设定参数" class="inline-flex justify-center items-center w-6 h-6 ml-4 text-base rounded-sm bg-gray/100 decoration-transparent invisible group-hover:visible" href="#2.-引用动画，设定参数">#</a></h4>在要设定动画的元素 class 上使用
<h4 class="group flex justify-start items-center">语法：<a name="语法：" aria-label="Anchor" id="语法：" class="inline-flex justify-center items-center w-6 h-6 ml-4 text-base rounded-sm bg-gray/100 decoration-transparent invisible group-hover:visible" href="#语法：">#</a></h4><ul>
<li><code>animation</code> 所有动画属性的简写属性，除了 animation-play-state 和 animation-fill-mode 属性。 语法： <code>animation: name duration timing-function delay iteration-count direction;</code> 语法参数含义参看后面的语法解析。 示例：
<pre><code class="hljs language-css">div {
 animation: myAnimation 5s infinite;
 -webkit-animation: myAnimation 5s infinite; /* Safari 和 Chrome */
}</code></pre></li>
<li><code>animation-name</code> 要引用 @keyframes 动画的名称。
</li>
<li><code>animation-duration</code> 规定动画完成一个周期所花费的秒或毫秒。默认是 0。
</li>
<li><code>animation-timing-function</code> 规定动画的速度曲线。默认是 &quot;ease&quot;。 语法： <code>animation-timing-function: value;</code> _linear_： 动画从头到尾的速度是相同的。 _ease_： 默认。动画以低速开始，然后加快，在结束前变慢。 _ease-in_： 动画以低速开始。 _ease-out_： 动画以低速结束。 _ease-in-out_： 动画以低速开始和结束。 _cubic-bezier(n,n,n,n)_： 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。 示例：
<pre><code class="hljs language-css">/* W3C 和 Opera: */
#div1 {
 animation-timing-function: linear;
}

/* Firefox: */
#div1 {
 -moz-animation-timing-function: linear;
}

/* Safari 和 Chrome: */
#div1 {
 -webkit-animation-timing-function: linear;
}</code></pre></li>
<li><code>animation-delay</code> 规定动画何时开始。默认是 0。
</li>
<li><code>animation-iteration-count</code> 规定动画被播放的次数。默认是 1。 语法： <code>animation-iteration-count: value;</code> _n_： 定义动画播放次数的数值。 _infinite_： 规定动画应该无限次播放。 示例：
<pre><code class="hljs language-css">div {
 animation-iteration-count: 3;
 -webkit-animation-iteration-count: 3; /* Safari 和 Chrome */
}</code></pre></li>
<li><code>animation-direction</code> 规定动画是否在下一周期逆向地播放。默认是 &quot;normal&quot;。 语法： <code>animation-direction: normal|alternate;</code> _normal_： 默认值。动画应该正常播放。 _alternate_： 动画应该轮流反向播放。 示例：
<pre><code class="hljs language-css">div {
 animation-direction: alternate;
 -webkit-animation-direction: alternate; /* Safari 和 Chrome */
}</code></pre></li>
<li><code>animation-play-state</code> 规定动画是否正在运行或暂停。默认是 &quot;running&quot;。 语法： <code>animation-play-state: paused|running;</code> _paused_： 规定动画已暂停。 _running_： 规定动画正在播放。 示例：
<pre><code class="hljs language-css">div {
 animation-play-state: paused;
 -webkit-animation-play-state: paused; /* Safari 和 Chrome */
}</code></pre></li>
<li><code>animation-fill-mode</code> 规定对象动画时间之外的状态。 语法： <code>animation-fill-mode : none | forwards | backwards | both;</code> _none_： 不改变默认行为。 _forwards_： 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。 _backwards_： 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。 _both_： 向前和向后填充模式都被应用。 示例：
<pre><code class="hljs language-css">div {
 animation-fill-mode: forwards;
 -webkit-animation-fill-mode: forwards; /* Safari 和 Chrome */
}</code></pre></li>
</ul>
<h4 class="group flex justify-start items-center">效果：<a name="效果：" aria-label="Anchor" id="效果：" class="inline-flex justify-center items-center w-6 h-6 ml-4 text-base rounded-sm bg-gray/100 decoration-transparent invisible group-hover:visible" href="#效果：">#</a></h4><a href="http://www.w3school.com.cn/tiy/t.asp?f=css3_animation4">参考 W3school 的 demo</a>
<a href="" id="id3"></a>
<h2 class="group flex justify-start items-center">浏览器支持<a name="浏览器支持" aria-label="Anchor" id="浏览器支持" class="inline-flex justify-center items-center w-6 h-6 ml-4 text-base rounded-sm bg-gray/100 decoration-transparent invisible group-hover:visible" href="#浏览器支持">#</a></h2><img src="https://ws2.sinaimg.cn/large/0069RVTdgy1fupd51aiv4j30u209k76w.jpg" alt=""> Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。 Chrome 和 Safari 需要前缀 -webkit-。

CSS3动画

CSS3 新增的 3D 变换属性： CSS3 3D 转换支持开发者在 css 代码中利用 css3 的 3D 函数，在页面里开发出一些简单的 3D 效果。
本节内容要点：
<ul>
<li>利用 transform 改变各个元素位置</li>
<li>利用 transition 增加动态效果</li>
<li>利用 perspective 属性改变视角</li>
</ul>
<a href="" id="id1"></a>
<h2 class="group flex justify-start items-center">3D 元素的属性<a name="3d-元素的属性" aria-label="Anchor" id="3d-元素的属性" class="inline-flex justify-center items-center w-6 h-6 ml-4 text-base rounded-sm bg-gray/100 decoration-transparent invisible group-hover:visible" href="#3d-元素的属性">#</a></h2><a href="" id="id11"></a>
<ol>
<li>transform：利用一些方法对元素进行 2D 或者 3D 转换。具体 转换方法参看 <a href="#id2">3D 元素的方法</a> 语法： <code>transform: none|transform-functions;</code><ul>
<li><code>none</code> 定义不进行转换。</li>
<li><code>transform-functions</code> 使用<a href="#id2">3D 元素的方法</a></li>
</ul>
</li>
</ol>
<a href="" id="id12"></a>
<ol start="2">
<li>transform-origin：设置元素坐标系原点的位置，影响到 2D、3D 的旋转效果 语法： <code>transform-origin: x-axis y-axis z-axis;</code>
<ul>
<li>x-axis 定义视图被置于 X 轴的何处。可能的值： left center right length %</li>
<li>y-axis 定义视图被置于 Y 轴的何处。可能的值： top center bottom length %</li>
<li>z-axis 定义视图被置于 Z 轴的何处。可能的值： length</li>
</ul>
示例： <code>-webkit-transform-origin:20% 40%; /* Safari 和 Chrome */</code>
取值对比： 1.数字和百分比相对于左上角 2.关键字相对于整个元素
<pre><code class="hljs "> top = top center = center top = 50% 0
 right = right center = center right = 100%或(100% 50%)
 bottom = bottom center = center bottom = 50% 100%
 left = left center = center left = 0或(0 50%)
 center = center center = 50%或（50% 50%）
 top left = left top = 0 0
 right top = top right = 100% 0
 bottom right = right bottom = 100% 100%
 bottom left = left bottom = 0 100%</code></pre>浏览器支持 <img src="https://ws1.sinaimg.cn/large/006tNbRwgy1fut27g9rczj30v806oabn.jpg" alt="">
Internet Explorer 10、Firefox、Opera 支持 transform-origin 属性。 Internet Explorer 9 支持替代的 -ms-transform-origin 属性（仅适用于 2D 转换）。 Safari 和 Chrome 支持替代的 -webkit-transform-origin 属性（3D 和 2D 转换）。 Opera 只支持 2D 转换。
</li>
</ol>
<a href="" id="id13"></a>
<ol start="3">
<li>transform-style：规定如何在 3D 空间中呈现被嵌套的元素 语法： <code>transform-style: flat|preserve-3d;</code>
<ul>
<li><code>flat</code> 所有子元素在 2D 平面呈现。 沿着 X 轴或 Y 轴方向旋转该元素将导致位于正或负 Z 轴位置的子元素显示在该元素的平面上，而不是它的前面或者后面。著作权归作者所有。</li>
<li><code>preserve-3d</code> 子元素将保留其 3D 位置。</li>
</ul>
示例： <code>-webkit-transform-style: preserve-3d; /* Safari 和 Chrome */</code>
浏览器支持 <img src="https://ws1.sinaimg.cn/large/006tNbRwgy1fut2ohsc19j30v006mtae.jpg" alt="">
Firefox 支持 transform-style 属性。 Chrome、Safari 和 Opera 支持替代的 -webkit-transform-style 属性。
</li>
</ol>
<a href="" id="id14"></a>
<ol start="4">
<li>perspective：perspective 属性定义 3D 元素距视图的距离，以像素计。（改变视角距离）
<ul>
<li>提示：请与 perspective-origin 属性一同使用该属性，这样您就能够改变 3D 元素的底部位置。
语法： <code>perspective: number|none;</code></li>
<li><code>number</code> 元素距离视图的距离，以像素计。</li>
<li><code>none</code> 默认值。与 0 相同。不设置透视。</li>
</ul>
示例：
<pre><code class="hljs language-css">div {
 perspective: 500;
 -webkit-perspective: 500; /* Safari 和 Chrome */
}</code></pre>浏览器支持 目前浏览器都不支持 perspective 属性。 Chrome 和 Safari 支持替代的 -webkit-perspective 属性。
</li>
</ol>
<a href="" id="id15"></a>
<ol start="5">
<li>perspective-origin：改变 3D 元素的底部位置（改变视角的朝向） 语法： <code>perspective-origin: x-axis y-axis;</code> 数字和百分比相对于左上角
<ul>
<li>x-axis 定义视图被置于 X 轴的何处。可能的值： left center right length %</li>
<li>y-axis 定义视图被置于 Y 轴的何处。可能的值： top center bottom length %</li>
</ul>
示例：
<pre><code class="hljs language-css">div {
 perspective: 150;
 perspective-origin: 10% 10%;
 -webkit-perspective: 150; /* Safari 和 Chrome */
 -webkit-perspective-origin: 10% 10%; /* Safari 和 Chrome */
}</code></pre>浏览器支持 目前浏览器都不支持 perspective-origin 属性。 Chrome 和 Safari 支持替代的 -webkit-perspecitve-origin 属性。
</li>
</ol>
<a href="" id="id16"></a>
<ol start="6">
<li>backface-visibility：backface-visibility 属性定义当元素不面向屏幕时是否可见。 语法： <code>backface-visibility 属性定义当元素不面向屏幕时是否可见。</code>
<ul>
<li><code>visible</code> 背面是可见的。</li>
<li><code>hidden</code> 背面是不可见的。</li>
</ul>
示例：
<pre><code class="hljs language-css">div {
 backface-visibility: hidden;
 -webkit-backface-visibility: hidden; /* Chrome 和 Safari */
 -moz-backface-visibility: hidden; /* Firefox */
 -ms-backface-visibility: hidden; /* Internet Explorer */
}</code></pre>浏览器支持 只有 Internet Explorer 10+ 和 Firefox 支持 backface-visibility 属性。 Opera 15+、Safari 和 Chrome 支持替代的 -webkit-backface-visibility 属性。
</li>
</ol>
<h2 class="group flex justify-start items-center">3D 元素的方法<a name="3d-元素的方法" aria-label="Anchor" id="3d-元素的方法" class="inline-flex justify-center items-center w-6 h-6 ml-4 text-base rounded-sm bg-gray/100 decoration-transparent invisible group-hover:visible" href="#3d-元素的方法">#</a></h2>语法： <code>transform: none|transform-functions;</code> 方法使用应该加<code>transform:</code>前缀
<ul>
<li><code>none</code> 定义不进行转换。</li>
<li><code>transform-functions</code> 3D 变换函数。具体函数及功能如下：<ul>
<li>matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换，使用 16 个值的 4x4 矩阵。</li>
<li>translate3d(x,y,z) 定义 3D 转化。</li>
<li>translateX(x) 定义 3D 转化，仅使用用于 X 轴的值。</li>
<li>translateY(y) 定义 3D 转化，仅使用用于 Y 轴的值。</li>
<li>translateZ(z) 定义 3D 转化，仅使用用于 Z 轴的值。</li>
<li>scale3d(x,y,z) 定义 3D 缩放转换。</li>
<li>scaleX(x) 定义 3D 缩放转换，通过给定一个 X 轴的值。</li>
<li>scaleY(y) 定义 3D 缩放转换，通过给定一个 Y 轴的值。</li>
<li>scaleZ(z) 定义 3D 缩放转换，通过给定一个 Z 轴的值。</li>
<li>rotate3d(x,y,z,angle) 定义 3D 旋转。</li>
<li>rotateX(angle) 定义沿 X 轴的 3D 旋转。</li>
<li>rotateY(angle) 定义沿 Y 轴的 3D 旋转。</li>
<li>rotateZ(angle) 定义沿 Z 轴的 3D 旋转。</li>
<li>perspective(n) 定义 3D 转换元素的透视视图。</li>
</ul>
</li>
</ul>
示例：
<pre><code class="hljs language-css">div {
 transform: rotate(7deg);
 -ms-transform: rotate(7deg); /* IE 9 */
 -moz-transform: rotate(7deg); /* Firefox */
 -webkit-transform: rotate(7deg); /* Safari 和 Chrome */
 -o-transform: rotate(7deg); /* Opera */
}</code></pre>浏览器支持 <img src="https://ws4.sinaimg.cn/large/006tNbRwgy1fuqf7u1vz0j30u204ot9y.jpg" alt="">
Internet Explorer 10、Firefox、Opera 支持 transform 属性。 Internet Explorer 9 支持替代的 -ms-transform 属性（仅适用于 2D 转换）。 Safari 和 Chrome 支持替代的 -webkit-transform 属性（3D 和 2D 转换）。 Opera 只支持 2D 转换。

CSS3-2D转换

怎么使用#

浏览器支持#