CSS3 Transform
CSS transform 属性(变形,改变)允许你修改CSS视觉格式模型的坐标空间。使用它,元素可以被 translate(转换),rotate(旋转),scale(缩放),skew(倾斜)
需要特别强调一点:transform 属性只对 块级元素生效(有些大牛博客说对内联元素和块级元素),亲测结果如下:
<h3>块级元素DIV</h3> <div class="img"> <img src="https://mdn.mozillademos.org/files/15157/firefox.png" alt=""> </div> <h3>行内元素SPAN</h3> <span class="img"> <img src="https://mdn.mozillademos.org/files/15157/firefox.png" alt=""> </span>
.img{ width: 80px; >img{ width: 80px; } &:hover{ transform: rotate(45deg) } }
可以看到,transform 属性对块级元素有效,对内联元素无效
语法:
transform: none | transform-function[ transform-function transform-function ...]
none 是默认值,表示不改变
transform-function 是转换函数,以 空格 隔开,也就是说对同一个元素,可以进行多种不同的变形操作,如:
transform: rotate translate skew
transform-origin CSS属性让你更改一个元素转换的原点
transform-origin 属性可以用一个,两个或三个值来指定,其中每一个值表示一个偏移量
- 一个值 必须是<length>,<percentage> 或 left,center,right,top,bottom 关键字中的一个
- 两个值
- 其中一个必须是 <length>,<percentage> 或 left,center,right 关键字中的一个
- 另一个必须是 <length>,<percentage> 或 center,top,bottom 关键字中的一个
- 三个值
- 前两个值和只有两个值的用法相同
- 第三个值必须是 <length> 它始终代表 Z 轴偏移量
1、rotate(旋转)
transform: rotate(angle); /* an <angle>, e.g. rotate(30deg) */
从转换原点(由 transform-origin 指定,默认是圆中心)开始,按照 顺时针 方向旋转一个特定的角度 (正数:顺时针,负数:逆时针)
2.scale(缩放)
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) */
Y 方向缩放
transform: scaleY(sy) /* a unitless <number>, e.g. scaleY(0.3) */
示例效果:(默认转换原点)
3、skew(倾斜)
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) */
Y方向倾斜
transform: skewY(angle) /* an <angle>, e.g. skewY(4deg) */
示例效果:(默认转换原点)
5、translate(平移)
transform: translate(tx[, ty]) /* one or two <length> values */
用向量 [tx, ty] 完成 2D 平移,如果没有 ty 指定,它的值默认为 0
X 方向平移
transform: translateX(tx) /* see <length> for possible values */
Y 方向平移
transform: translateY(ty) /* see <length> for possible values */
示例效果:(默认转换原点)
不同厂商浏览器下的前缀书写规则:
//Mozilla内核浏览器:firefox3.5+
-moz-transform: rotate | scale | skew | translate ;
//Webkit内核浏览器:Safari and Chrome
-webkit-transform: rotate | scale | skew | translate ;
//Opera
-o-transform: rotate | scale | skew | translate ;
//IE9
-ms-transform: rotate | scale | skew | translate ;
//W3C标准
transform: rotate | scale | skew | translate ;