transform的常用属性总结

transform属性值：

一、transform: translate();

1、translate()函数可以将元素向指定的方向移动，类似于position中的relative。可以把元素从原来的位置移动，而不影响在X、Y轴上的任何Web组件。
2、translate()的括号内包含两个值，分别为相对于元素原有位置在水平方向和垂直方向的偏移值。
3、向下、向右为正方向
4、如果只想在x轴或者y轴上进行变换，那么属性为translateX(n)和translateY(n)

下面这段代码就是让一个盒子平移并对比不会影响其他的盒子能够真切的显示出translate()不会影响周围其他元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{width: 100px;height: 100px;}
        div:nth-child(1) {background: #00ff00;transform: translate(0, 0);transition: transform 2s linear;}
        div:nth-child(2){background: #ff0000;}
        div:nth-child(1):hover {transform: translate(100px, 100px)}
    </style>
</head>
<body>
    <div></div>
    <div></div>
</body>
</html>

二、transform:rolate();

1、正值为顺时针，负值为逆时针，单位为deg。
2、旋转中心为元素正中。

三、transform:transform-origin

1、任何一个元素都有一个中心点，默认情况之下，其中心点是居于元素X轴和Y轴的50%处。
2、在没有transform-origin改变元素原点位置的情况下，CSS变形进行的旋转、缩放，扭曲等操作都是以元素自己中心位置进行变形。
3、如果实现过渡动画，则变换中心点应该在元素初始CSS中设置。
4、 transform-origin:x y z;
x
固定值关键字百分比
y
固定值关键字百分比
z
固定

下面这段代码用过渡动态的让盒子旋转了一周，并运用transform-origin()改变旋转的圆心

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
	div{width: 100px;height: 100px;background: #0f0;transition:all 3s;margin: 100px auto;transform-origin: 100px 100px;}
	div:hover{transform:rotate(360deg) }
</style>
</head>
<body>
	<div></div>
</body>
</html>

四、transform:scale();

1、scale(x,y) ：x,y 值分别为原有元素宽高的倍数。 1为不缩放，大于1放大，小于1缩小。
2、当为负值时，将会沿x轴或y轴进行翻转
3、当括号内两个数相同时，可以只写一个值代替。如果只想扩大x轴或者y轴，那么属性为scaleX(n)和scaleY(n)
4、transform-origin 影响变换方向。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{width: 100px;height: 50px;transition: all 2s;background: #0f0;margin: 100px auto;}
        div:hover{transform:scale(0.5,2)}</style>
</head>
<body>
    <div>富强、民主</div>
</body>
</html>

五、transform:skew();

1、skew(x-angle,y-angle)方法，该元素会以横向（X轴）和垂直（Y轴）为参考确定角度;

2、如果只想沿x轴或者y轴进行倾斜，那么属性为skewX(n)和skewY(n)

六、transform:matrix();

1、matrix()方法用来把2D变换方法合并成一个。

2、matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。

div{
    transform:matrix(0.866,0.5,-0.5,0.866,0,0);
    //x轴缩放，y轴倾斜，x轴倾斜，y轴缩放、x轴平移、y轴平移
}