transform属性 -- css属性详解系列（3）

transform 属性介绍

css3里新增的旋转、缩放、移动或倾斜的强大属性。
http://www.w3school.com.cn/cssref/pr_transform.asp
http://www.w3school.com.cn/css3/css3_3dtransform.asp
http://www.w3school.com.cn/cssref/pr_transform-origin.asp

transform 缩放时遇到的问题

测试浏览器：chrome

dom节点占用的空间

测试demo1：

<div style="width: 100px;background-color: red;padding: 0px">    <div style="left:0px;top:0px;width:100px;margin: 0px;height:100px;-webkit-transform:scale(2,2);-webkit-transform-origin:0px 0px"></div></div>

测试结果：
父div的height为100px

结论：
当一个div没有制定height时，它的height取决于子div的height。那么这里的子div的height是只其放大前的呢？还是放大后的呢？
当子div使用放大时，父节点的height撑开的高度仍然是这个子div的height属性。而不是height属性*放大系数后的值。

测试demo2：

<div style="width: 400px;height:400px;position: absolute;overflow: scroll;">    <div style="width:800px;height:800px;-webkit-transform:scale(0.5,0.5);-webkit-transform-origin:0px 0px;background-color: blue"></div></div>

测试结果：
水平方向"没有滚动条"，垂直方向上出现了滚动条。
结论：
使用了transform进行了缩放的div，对overflow:scroll而言，其占用的宽度范围是其缩放后的数值，其高度是其缩放前的数值。

参考系的问题

测试demo：

<div style="width:640px;height:200px;background-color: red;border: 1px solid">    <div style="position:absolute;left:80px;width:320px;height:100px;-webkit-transform:scale(1.5,1.5);-webkit-transform-origin:0px 0px;background-color: blue"></div>

测试结果：
div居中展示。这里需要注意left的取值，它是怎么来的呢？

(640−1.5∗320)/2=80;

结论：
子div的left的值没有使用放大系数。而子div的width;height属性受到了放大系数的影响。进一步讲，和子div及其内部包含内容有关的属性会受到-webkit-transform:scale(1.5,1.5)的影响，其他的属性不会。

放大倍数的叠加

测试demo：

<div style="width:640px;height:200px;background-color: red;border: 1px solid;-webkit-transform:scale(10,10);-webkit-transform-origin:0px 0px;left:80px;">    <div style="position:absolute;width:320px;height:100px;-webkit-transform:scale(0.1,0.1);-webkit-transform-origin:0px 0px;left:80px;background-color: blue; FONT-size:12px;">        <img src="http://imgcache.qq.com/qqshow/admindata/comdata/vipMdl_act_embigbang/sha1.ad3ee2f78051e9b1d015fd14b12c6cd5a6ead94b.jpg">    </div></div>

测试结果及结论：

• 放大系数是相乘的关系
• 放大、缩小对图片质量的没有影响