CSS中transform
属性允许你修改CSS可视化模型的坐标空间。通过transform,可以让元素进行移动(translate)、旋转(rotate)、缩放(scale)、倾斜(skew)。
如果该属性有一个非none值, 将会产生一个层叠上下文. 在这种情况下 对象将作为它包含的 position
: fixed 元素的
包含块(a containing block)。
初始值 | none |
---|---|
适用元素 | transformable elements |
是否是继承属性 | 否 |
Percentages | refer to the size of bounding box |
适用媒体 | visual |
计算值 | as specified, but with relative lengths converted into absolute lengths |
Animation type | a transform |
正规顺序 | the unique non-ambiguous order defined by the formal grammar |
Creates stacking context | yes |
语法
/* Keyword values */ transform: none; /* Function values */ transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0); transform: translate(12px, 50%); transform: translateX(2em); transform: translateY(3in); transform: scale(2, 0.5); transform: scaleX(2); transform: scaleY(0.5); transform: rotate(0.5turn); transform: skew(30deg, 20deg); transform: skewX(30deg); transform: skewY(1.07rad); transform: matrix3d(1.0, 2.0, 3.0, 4.0, 5.0, 6.0, 7.0, 8.0, 9.0, 10.0, 11.0, 12.0, 13.0, 14.0, 15.0, 16.0); transform: translate3d(12px, 50%, 3em); transform: translateZ(2px); transform: scale3d(2.5, 1.2, 0.3); transform: scaleZ(0.3); transform: rotate3d(1, 2.0, 3.0, 10deg); transform: rotateX(10deg); transform: rotateY(10deg); transform: rotateZ(10deg); transform: perspective(17px); /* Multiple function values */ transform: translateX(10px) rotate(10deg) translateY(5px); /* Global values */ transform: inherit; transform: initial; transform: unset;如何阅读 CSS 语法。
transform: <transform-function> [<transform-function>]* | none
Vendor prefixes: 如果您需要使用此功能,请查看浏览器兼容性列表,获取各个浏览器供应商的前缀。
取值
<transform-function>
至少一个 CSS transform functions 被应用, 请看下面的示例.
none
指定为 不应用transform
示例
标准语法(Formal syntax)
none
范例
在线示例
HTML Content
<p>Transformed element</p>
CSS Content
p { border: solid red; -webkit-transform: translate(100px) rotate(20deg); -webkit-transform-origin: 0 -250px; transform: translate(100px) rotate(20deg); transform-origin: 0 -250px; }
CSS transform函数
transform
属性允许在元素使用的坐标系统中使用transform函数到达变形的效果。下面描述了这些功能:
matrix(矩阵)
transform: matrix(a, c, b, d, tx, ty)/* a, b, c, d 创建了变形矩阵
┌ ┐
│ a b │
│ c d │
└ ┘
tx, ty是变形的值 . */
指定二维矩阵中的6个值,和使用矩阵matrix [a b c d tx ty] 是等效的。
Note: Gecko (Firefox) accepts a <length>
value for tx and ty.
Webkit (Safari, Chrome) and Opera currently support a unitless <number>
for tx and ty.
在线示例
background: gold; width: 30em;
-moz-transform: matrix(1, -0.2, 0, 1, 0, 0);-webkit-transform: matrix(1, -0.2, 0, 1, 0, 0);
-o-transform: matrix(1, -0.2, 0, 1, 0, 0);
-ms-transform: matrix(1, -0.2, 0, 1, 0, 0);
transform: matrix(1, -0.2, 0, 1, 0, 0);
background: wheat;max-width: intrinsic;
-moz-transform: matrix(1, 0, 0.6, 1, 15em, 0);-webkit-transform: matrix(1, 0, 0.6, 1, 250, 0);
-o-transform: matrix(1, 0, 0.6, 1, 250, 0);
-ms-transform: matrix(1, 0, 0.6, 1, 250, 0);
transform: matrix(1, 0, 0.6, 1, 250, 0);
See also
Coordinate transformation matrices mathamazement.com
旋转
transform: rotate(angle); /* an <angle>, e.g. rotate(30deg) */
从原点(由 transform-origin
属性指定)开始安装顺时针方向旋转元素一个特定的角度。此操作对象的矩阵是 [cos(angle) sin(angle) -sin(angle) cos(angle) 0 0] 。
缩放
transform: scale(sx[, sy]); /* one or two unitless <number>s, e.g. scale(2.1,4) */
由[sx, sy]描述指定一个二维缩放操作。如果sy
未指定,默认认为和sx的值相同。
X方向缩放
transform: scaleX(sx); /* a unitless <number>, e.g. scaleX(2.7) */
使用向量[sx, 1] 完成在X方向上的缩放.
Y方向缩放
transform: scaleY(sy) /* a unitless <number>, e.g. scaleY(0.3) */
使用向量[1, sy] 完成在Y方向的缩放.
倾斜
transform: skew(ax[, ay]) /* one or two <angle>s, e.g. skew(30deg,-10deg) */
元素在X轴和Y轴方向以指定的角度倾斜。如果ay未提供,在Y轴上没有倾斜。
X方向倾斜
transform: skewX(angle) /* an <angle>, e.g. skewX(-30deg) */
绕X轴以指定的角度倾斜
Y方向倾斜
transform: skewY(angle) /* an <angle>, e.g. skewY(4deg) */
绕Y轴以指定的角度倾斜
平移
transform: translate(tx[, ty]) /* one or two <length> values */
Specifies a 2D translation by the vector [tx, ty]. If ty
isn't specified, its value is assumed to be zero.
用向量[tx, ty]完成2D平移。如果ty没有指定,它的值默认为0。
X方向平移
transform: translateX(tx) /* see <length> for possible values */
在X轴平移指定距离
Y方向平移
transform: translateY(ty) /* see <length> for possible values */
在Y轴平移指定距离
浏览器兼容性
Feature | Firefox (Gecko) | Chrome | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | 3.5 (1.9.1)-moz | yes -webkit | 9.0-ms | 10.5-o | 3.1-webkit |
3D Support | 10.0-moz | 12.0-webkit | 10.0-ms | no | 4.0-webkit |
提示
IE5或以上版本支持 Matrix Filter 属性完成相同的效果。
在IE9中,使用jQuery动态添加样式,不显示效果,其他浏览器显示正常。是因为IE9认为 -ms-transform是无效的脚本,不执行。请将 "-ms-transform"改为“msTransform”。
更多内容请查看下面链接:
说明
另见
More info on CSS3 Rotation / Matrix Filter issues in the comments on Paul Irish's blog.
A cross-browser 2D transform plugin for jQuery
文档标签和贡献者
此页面的贡献者: zhengxinxin, Sebastianz, kevinfszu, FredWe, teoli, ethertank, lmorchard, OoOoOoOo,leeli
最后编辑者: zhengxinxin, Oct 14, 2016, 12:06:24 AM
学习 Web 开发的最佳实践
电子邮件地址
立即注册
隐藏新闻报注册
另见
2005-2016 Mozilla 开发者网络及各贡献者
转载于:https://blog.51cto.com/11180930/1885518