跳到主要内容

2 弟

09 年 12 月 W3C 在 3D 草案的基础上，发布了 2D 的变形标准草案（ http://www.w3.org/TR/css3-2d-transforms/ )。目前， 2 D 得到了各主流浏览器的支持。

transform: none | <transform-function> | [<transform-function>];

对于早期的版本的浏览器， WebKit 引擎支持 -WebKit-transform 私有属性， Mozilla Gecko 引擎支持 -moz-transform 私有属性， Presto 引擎支持 -o-transform 私有属性， IE 9 支持 -ms-transform 私有属性，目前大部分浏览器支持 transform 标准属性。

rotate （）​

旋转元素，元素对象可以是内联元素也可以是块级元素：

rotate: <angle>;
  • deg 角度值，一圈 360
  • grad 梯度值，一圈 400
  • rad 弧度，一圈 2Π
  • turn 圈，一圈就是 1 turn
div:hover {
  /* 定义动画的状态 _ */
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
  /* 兼容早期 IE */
  filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=3);
}

IE 在怪异模式下不支持 filter 属性，应该使用 IE 的私有属性定义，即 -ms-filter ，而不是 filter ：ms-filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=3);

scale （）​

缩放元素，包含两个参数，分别用来定义宽和高缩放比例：

number 可以是正数、负数、小数。正数值基于指定的宽和高缩放元素；负数值不会缩小元素，而是翻转元素，然后再缩放元素。使用小于 1 的数，则为缩小，若第二个参数省略，则第 2 个参数与第 1 个参数相同。

.test a:hover {
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  background: url(images/icon2.jpg) #f00 no-repeat 5px 12px;
  /*设置 a 元素在鼠标经过时放大2倍尺寸进行显示*/
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -o-transform: scale(1.2);
  transform: scale(1.2);
}

translate()​

移动元素 ,基于 X 和 Y 坐标的重新定位元素：

<div class="c" style="transform: translate(3rem,-2rem);">translate(<translation-value)[,<translation-value]</div>

<translation-value> 参数表示坐标值，第 1 个参数表示相对于原位置的 x 轴的偏移位置，第 2 个参数表示相对于原位置 y 轴偏移距离。如果省略了第 2 个参数

skew （）​

倾斜元素，基于 X 轴和 Y 轴的倾斜

<div class="c" style="transform: skew(6deg,3deg);">skew(<angle>[,<angle>]);</div>

matrix()​

矩阵变换，基于 X 和 Y 坐标重新定位元素位置

matrix(<number>,<number>,<number>,<number>,<number>,<number>)
  • 第一个参数控制 X 轴缩放 scaleX()
  • 第二个参数控制 X 轴倾斜 skewX()
  • 第三个参数控制 Y 轴倾斜 skewY()
  • 第四个参数控制 Y 轴缩放 scaleY()
  • 第五个参数控制 X 轴移动 translateX()
  • 第六个参数控制 Y 轴移动 translateY()

变幻原点​

变形原点通过 transform-origin 来设置:

transform-origin: [[<percentage> | <length> | left | center | right ]
   [<percentage> | <length> |top | center | bottom ] | [[
    left | center | right ] |
| [top | center | bottom]]

初始值为 50% 50% 。可接受任何有效方向数据，可以是百分比、 em 、 px ，也可以是 left 、 right 、 center 、 top 、 middle 、 bottom

backface-visibility​

backface-visibility 属性规定元素不面向屏幕时是否可见

backface-visibility: visible | hidden;
  • visible ： 背面可见
  • hidden ： 背面不可见