深入解读CSS3中transform变换模型的渲染

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

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

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

XML/HTML Code复制内容到剪贴板

<div style="transform: translate(80px, 80px)">  

  <div style="transform: scale(1.5, 1.5)">  

      <div style="transform: rotate(45deg)"></div>  

  </div>  

</div>  

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

（编辑：PHP编程网 - 黄冈站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!