css3 2D变形

css3 变形

2D变形（transform）

1. 元素位移【translate(X,Y)】

沿着X和Y轴移动元素（可以是负数），X轴：

transform:translate(X,Y);/*沿着X轴和Y轴移动，可以是负数，可以是百分数(相对于自身的宽高)*/
transform:translate(X);/*只有一个参数时，表示X轴移动*/
transform:translateX(X);/*沿着X轴移动*/
transform:translateX(Y);///*沿着Y轴移动*/

效果等价于：

position: absolute;/*绝对定位(absolute) 或者 固定定位(fixed)*/
left: 120px;/*距离左边*/
top: 120px;/*距离顶部*/

可以配合相对定位(relative)和绝对定位(absolute)来实现水平和垂直居中

2. 缩放/放大转换【scale(x,y)】

​ 改变元素的宽度和高度，以元素中心点进行缩放/放大/翻转

当scale只有一个参数时，同时表示宽度和高度

1. 当大于0时，元素进行缩小/放大

transform: scale(0.5,0.5);/*元素缩小1/2*/
transform: scale(1,1);/*不变  */
transform: scale(2,3);/*宽度x2，高度x3*/
transform: scale(0);/*不显示*/
transformX:scale(2);/*宽度x2*/
transformY:scale(3);/*高度x3*/

2. 当小于0时，元素页会进行翻转，其余和大于0时一样，也会进行缩小/放大

3.旋转rotate(角度)

元素旋转，deg为单位

transform:  rotate(-45deg);/*逆时针旋转45度 */
transform:  rotate(0deg);
transform:  rotate(45deg);/*顺时针旋转45度 */

4.倾斜skew

skew(X,Y) 有两个参数，当只有一个参数时，第二个参数默认为0

transform:  skew(10deg,0deg);/**/
transform:  skewX(10deg);/*沿着X轴正方向倾斜10度   等价于 skew(10deg)*/
transform:  skewX(-10deg);/* 沿着X轴负方向倾斜10度  */
transform:  skewY(10deg);/* 沿着Y轴 */
transform:  skewY(-10deg);/*  */

5.调整元素的基点（transform-origin）

需配合元素变形属性使用

/*定义视图被置于X轴的何处。可能的值：left center right length % */
/*定义视图被置于Y轴的何处。可能的值：left center right length % */
/*定义视图被置于z轴的何处。可能的值： length*/
transform-origin: x y z;
transform-origin: 0 0 0;/*左上角*/
transform-origin: left top;/*左上角*/
transform-origin: 0 100% 0;/*右上角*/
transform-origin: right top;/*左上角*/
transform-origin: 10px 10px;/*以上边框为x轴，左边框为y轴，坐标（10px,10px）处*/