css3中的2d变换属性.pdfVIP

transform属性 E{transform:function{value };} 1.旋转 E{transform:rotate(value); }//value是一个角度值 旋转后的元素会保持它在文档流中的位置，后续的元素会受到它以及它的padding margin 的影响，但变换后的元素不影响页面的布局，它会位于页面剩余部分之上的一个新层中。 变换的原点 E{transform-origin:value(s); }//value为关键词或者百分比值，若写一个，另一个为center/50% 原点默认为元素绝对中心（水平和垂直中心交点）。 例： E{transform-origin:00;} 或者 E{transform-origin:lefttop;}//原点在左上角 2.平移 E{transform:translateX(value);} E{transform:translateY(value);} E{transform:translate(translateX,translateY);} value为长度值或百分比值，可以为负值，被变换的元素会保留它的位置，被变换的是元素 的图像，而不是元素本身。 例： E{transform:translate(20px,-15%); }//Y轴沿着向上的方向移动自身高度的 15% 3.倾斜 E{transform:skewX(value); } E{transform:skewY(value); } E{transform:skew(skewX,skewY); } skew函数允许修改元素的水平轴或垂直轴的角度，value值是角度值，可以使用负值，如果 只写一个值，默认为x方向，另一个默认为0。 4.缩放 Scale函数，可以让一个元素与原来相比变得更大或更小。Value值无单位，给出的是一个尺 寸比例，默认为1，可以为负数，负值的效果就是水平或垂直翻转元素，以相同大小创建原 元素的 “映射”。如果只写一个值，另一个默认相同。 E{transform:scaleX(value); } E{transform:scaleY(value); } E{transform:scale(scaleX,scaleY); } 5.多重变换 可以在一个单独的元素上应用多重变换，只需要在transform属性中用空格隔开列出多个函 数既可以。 例： h2{transform:rotate(-40deg)scale(0.75)translate(-40%,-400%); } 使用矩阵变换元素 matrix 函数 E{transform:matrix(a,b,c,d,X,Y);}//所有默认值均为0，可以实现所有以上效果 使用webkit反射（倒影） E{-webkit-box-reflect:directionoffsetmask-box-image;} 第一个值direction是一个关键字，设置反射相对元素应该出现的位置，分别有：above、below、 left或right。offset是一个长度值，设置元素和反射之间的距离。最后一个值可选，允许把 一张图片设置为遮罩。