您现在的位置是：网站首页> 编程资料编程资料

深入解读CSS3中transform变换模型的渲染_css3_CSS_网页制作_

2021-09-13 884人已围观

简介 transform通过一组函数实现了对盒子大小、位置、角度的2D或者3D变换,这里我们主要来深入解读CSS3中transform变换模型的渲染,尤其是关注web端3D渲染动画的朋友千万不要错过

介绍

transform是通过一系列矩阵变换完成的，scale等transform-function都是对matrix的封装。

w3里的解释是，transform基于可视化格式模型（visual formatting model，这样翻译对不对啊）并为其绘制出一个坐标系，而且所有在这个坐标系内进行的操作，如向右向下，都是在这个坐标系内以像素方式表示

元素设置了transform并不会改变元素所在的文档流，其布局仍然受盒模型支配，因此这里的变换的效果是可以与浮动、定位并存的。

当元素设置了transform后，会为该元素定义一个坐标系，并且在该坐标系内进行矩阵变换，将变换结果映射到用户坐标系（也就是实际上的上下文）中。

多个矩阵变换函数将依次从左到右计算，如transform:translate(80px, 80px) scale(1.5, 1.5)，浏览器会先计算位移，再缩放1.5倍。以下两种代码效果相同：

html

CSS Code复制内容到剪贴板
  1. "transform: translate(80px, 80px)">   
  2.   "transform: scale(1.5, 1.5)">   
  3.        "transform: rotate(45deg)">
  
  •   
    •   
    •   

    html

    CSS Code复制内容到剪贴板
    1. "transform: translate(80px, 80px) scale(1.5, 1.5) rotate(45deg);">   
    2.  
      

    坐标原点的位置受属性 transform-origin的影响。

    如果是3D变换，则还会将其加入一个3D渲染上下文（3D rendering context）。根据个人理解，无论有多少个转换为3D的元素，其将始终在这个上下文内并可能相互影响，类似一个文档中的多个被绝对定位的元素。

    任何非none的transform值都会导致一个堆叠上下文（stacking context）和包含块（containing block）的创建。

    变换渲染模型
    为transform属性指定一个除了none的值便会在元素上创建一个新的局部坐标系统并且应用于这个元素。通过元素的变换模型，元素可以绘制渲染出自己的坐标系统。变换是可以积累的。也就是说，元素可以通过父元素的坐标的系统来建立自己的局部坐标系统。从用户的视角看，一个元素不但可以从它的祖先元素上有效的积累transform属性，而且也可以给自己增加transform属性并应用与自己。这些变换的积累为元素描绘出了当前的变换模型。

    带有两个轴的坐标空间：X轴水平向右为正，Y轴垂直向下为正。立体的变换函数增加了坐标空间将其延生至了三维空间，增加的Z轴垂直与屏幕，并且面向观察者的方向为正(也就是电脑屏幕前的我们)。如图。
    2016527121429287.png (300×244)

    变换模型通过如下的transform和transform-origin属性进行计算

    从具体的模型开始
    通过transfrom-origin的X,Y,Z计算值进行移动
    从左到右复合应用在transform属性中的transform functions
    使之前设置的transform-origin的值无效并进行移动
    EXAMPLE1

    CSS Code复制内容到剪贴板
    1. div {   
    2.   transform: translate(100px,100px);   
    3. }  

    2016527121453089.png (800×394)

    EXAMPLE2

    CSS Code复制内容到剪贴板
    1. div {   
    2.   height: 100px;   
    3.   width: 100px;   
    4.   transform-origin: 50px 50px;   
    5.   transform:rotate(45deg)   
    6. }  

    transform-origin通过在X,Y轴方向上各移动50px来移动原点。元素沿着原点顺时针旋转了45°。当所有的transform functions都应用后，平移后的原点在X,Y轴上又各移动了-50px,回到了原来的位置。如图
    2016527121511177.png (800×308)

    理解
    上面的话的意思就是，transform-origin的起始点是在原点的位置，旋转围绕着transform-origin在转，移动transform-origin是从原点开始的，而不是transform-origin的默认位置开始移动的(默认为元素中心，上例恰好也刚刚好移动到元素的中心位置)，transform-origin移动完后，并在元素上已经将transform functions应用完后，平移后的原点便会回到原来的位置，也就是说，下次改变transform-origin的位置仍然是从起始点算起（也就是之前的原点）。

    EXAMPLE3
    以下所涉图片深绿色部分均是没有使用变换属性时元素的本来样子。

    CSS Code复制内容到剪贴板
    1. div {   
    2.   height: 100px;   
    3.   width: 100px;   
    4.   transform: translate(80px,80px) scale(1.5,1.5) rotate(45deg);   
    5. }   

    首先在X,Y轴上各移动80px,然后将元素放大150%，接着沿着Z轴方向顺时针旋转45°。
    2016527121529967.png (300×300)

    注意:缩放和旋转，都是通过元素的中心进行运转的，因为元素的默认transfrom-origin值为50% 50%。

    通过嵌套元素可以实现与上面相同的效果

    XML/HTML Code复制内容到剪贴板
    1. <div style="transform: translate(80px, 80px)">  
    2.   <div style="transform: scale(1.5, 1.5)">  
    3.       <div style="transform: rotate(45deg)">div>  
    4.   div>  
    5. div>  

    3D变换渲染
    通常，元素都是依照平面进行渲染，并且被渲染的元素与它们的包含块的平面一致。平面的transform functions可以改变元素的表现，但是它仍然在与它的包含块相同的平面里进行渲染。

    三维的变换会导致变换模型有着一个非0的Z组件(Z轴投射在屏幕的外面)。这样可以造成元素可以在不同的平面进行渲染，而不是在它的包含块的平面内进行渲染。这也可能会影响一个元素和与之有联系的另一个元素从前到后的渲染顺序，同时和导致与其他元素发生交叉。这样的表现依赖于这个元素是否为3D rendering context中的一员，正如下所说

    上面的描述并不会完全准确的在WebKit中是实现。也许它会被改变来适应现在的是实现？See,Bug 19637
    EXAMPLE4

    CSS Code复制内容到剪贴板
    1. div {   
    2.   height: 150px;   
    3.   width: 150px;   
    4. }   
    5. .container {   
    6.   border: 1px solid black;   
    7.   background-color: #ccc;   
    8. }   
    9. .transformed {   
    10.   transform: rotateY(50deg);   
    11.   background-color: blue;   
    12. }  
    XML/HTML Code复制内容到剪贴板
    1. <div class="container">  
    2.   <div class="transformed">div>  
    3. div>  

    2016527121546448.png (335×333)

    这次变换是一个围绕着垂直的Y轴进行的50度旋转。但是为什么这次变换为什么使的盒子便窄了呢？而不是变得立体呢？

    perspective和perspective-origin属性可以通过使元素在Z轴变得更高而使元素显得更大，以此来增加观者在空间深度上的感知，同时也可以通过同样的方法使之显得越小。缩放比例的比例项公式是d/(d-Z),perspective的值就是从绘制平面到假设的观者眼睛的位置。
    2016527121622765.png (800×696)

    上图用图形解释了缩放比例是如何依赖于perspective属性和Z的值。在上面的那张图，Z值是d的一半。原始的圆圈(实线圆圈)出现在Z上(虚线圈)，为了是它呈现在画面中，圆圈通过以上两个要素按比例放大，最后在画面中呈现出来了放大的浅蓝色圆圈。下面的图形，圆圈通过比例进行缩小出现在原始位置后面的1/3圆圈，最后在画面中呈现出了缩小的浅蓝色圆圈。

    通常假设观察者眼睛的位置在画面的中央。但是，如果想的话，这个位置也是可以移动的-例如，如果一个网页包含了很多图画那么大家通过设置perspective-origin的值来分享相同的视角。
    2016527121645443.png (800×411)

    图形表现了向上移动perspective origin对表现效果的影响

    透视模型按如下进行计算：

    1.从具体的模型开始
    2.通过 设置的perspective-origin的X,Y的计算值进行移动
    3.通过获得perspective属性的值应用在模型上
    4.使之前设置的perspective- origin的值无效并进行移动
    EXAMPLE5
    这个例子表现了透视可以被用来表达立体的变换从而显现出更多真实的细节

    CSS Code复制内容到剪贴板
    1. div {   
    2.   height: 150px;   
    3.   width: 150px;   
    4. }   
    5. .container {   
    6.   perspective: 500px;   
    7.   border: 1px solid black;   
    8.   background-color: #ccc;   
    9. }   
    10. .transformed {   
    11.   transform: rotateY(50deg);   
    12.   background-color: blue;   
    13. }   
    XML/HTML Code复制内容到剪贴板
    1. <div class="container">  
    2.   <div class="transformed">div>  
    3. div>  

    2016527121702837.png (300×262)

    里面的元素和在前面的例子中有着相同的变换，但是它的渲染被父元素上的perspective属性所影响。透视给予了一个显现的深度，导致顶点有了Z坐标(靠近观察者)使其在X,Y轴被放大，并且更进一步的(在负的Z轴上)也会被缩小。
    一个并不包含在3D渲染上下文中的立体变换元素有着合适的transform值进行渲染，但是也不会与其他任何元素发生相交。在这个EXAMPLE4中的立体变换可以被考虑为一种绘画效果，就像平面中的变换。相似的，变换不会影响渲染命令。举个例子，在transform中设置Z的值使元素进行移动可能使元素变得更大，但是并不会导致元素去渲染它前面没有设置Z值的元素

    一个包含在3D渲染上下文的立体变换元素在同样的3D渲染上下文中可以与其他元素相交;参与相同3D渲染上下文的元素，根据它们的变换结果，可能会互相隐藏或者相交。在同样的3D坐标空间摆放，使它们好像全部都是兄弟姐妹。一个元素在立体空间中摆放的位置决定于从建立3D渲染上下文的包含块中积累的变换模型所决定。
    EXAMPLE6

    CSS Code复制内容到剪贴板
    1. div {   
    2.   height: 150px;   
    3.   width: 150px;   
    4. }   
    5. .container {   
    6.   perspective: 500px;   
    7.   border: 1px solid black<

      上一篇：像素密度与CSS3的viewport在移动端Web响应式布局中的运用_CSS布局实例_CSS_网页制作_

      下一篇：CSS3解决移动页面上点击链接触发色块的问题 _css3_CSS_网页制作_

    相关内容

    点击排行

    本栏推荐

    猜你喜欢

    -六神源码网