css3中2D变形tranform总结(附实例)

目录

1. 移动 translate
2. 缩放 scale
3. 旋转 rotate
4. 旋转中心点
5. skew倾斜

正文

1. 移动 translate

• Transform:translate(x,y); X轴跟Y轴的数值
• Transform: translateX(); 只给一个数值，移动X轴
• Transform: translateY(); 只给一个数值，移动Y轴

注意：常配合过渡效果一起使用

用transform让定位的盒子居中对齐

引进概念：
在transform：translate（x%,y%）;中，
百分数是以本元素为标准而不是以父级元素为标准。
之前定位居中方法是： 设置50%的偏移量，然后让居中的盒子往相反的方向移动自身的一半，这个一半是手动计算的固定死的一般，这样不好

新的方法：

.son {
		 position: absolute;  
	     left: 50%;   
		 top: 50%;
 	     transform: translate(-50%,-50%);
     }

2. 缩放 scale

• scale()： 指定对象的2D scale（2D缩放）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认取第一个参数的值
• scalex()： 指定对象X轴的（水平方向）缩放
• scaley()： 指定对象Y轴的（垂直方向）缩放

transform: scale(1.2);

3. 旋转 rotate

语法：

• Transform：rotate(180deg); 旋转180度
• deg:度数

Backface-visibility: hidden;

隐藏元素的背面，通常用于旋转180度使其不可见

4. 旋转中心点

默认的旋转的中心点是图形的中点

可通过：Transform-origin：；指定中心点的位置

取值：

• < percentage >： 用百分比指定坐标值。可以为负值。
• < length >： 用长度值指定坐标值。可以为负值。
• left： 指定原点的横坐标为left
• right： 指定原点的横坐标为right
• top： 指定原点的纵坐标为top
• bottom： 指定原点的纵坐标为bottom

例子：

            transform-origin: left top;
            transform-origin: 20px 20px;  /*水平跟垂直方向*/

5. skew倾斜

skew()： 指定对象skew transformation（斜切扭曲）。

第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0

单位仍然是deg。

对于x轴，正值为左，负值为右。

对于Y轴，正值为上，负值为下。

            transform: skew(10deg, 0);  /*x轴正的往左边歪*/
            transform: skew(-30deg, 0);  /*x轴负的往右边倾斜*/
            transform: skew(0, -10deg);  /*y轴负的方向为向下*/

例子：

原图：

transform: skew(30deg,0);

transform: skew(-30deg,0);

 transform: skew(0,30deg);

 transform: skew(0,-30deg);