2D变形（CSS3）transform
transform是CSS3中具有颠覆性的特征之一，可以实现元素的位移translate、旋转ratate、倾斜skew、缩放scale，甚至支持矩阵方式，配合过渡和即将学习的动画知识，可以取代大量之前只能靠Flash才可以实现的效果。
变
translate移动
translate(x,y)水平方向和垂直方向同时移动
translateX(x)仅水平方向移动
translateY(y)仅垂直方向移动
x,y可以为负值；
移动距离,如果为%,不是以父级宽度为准,而是以自身元素的宽度为准;
transform: translate(100px) /* 水平移动100px */
transform: translate(50%); /* 水平移动自身元素的50% */
定位时的居中对齐:
position: absolute;
letf: 50%;
margin-left: -50px; /* 假设盒子的宽度为100px */
现在就可以利用transform:translate()做到居中了,如下:
position: absolute;
left: 50%;
transform: translate(-50%);
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div {
width: 100px;
height: 100px;
background-color: green;
transition: all 0.5s; /*过渡*/
}
div:active { /*鼠标点击时的操作*/
transform: translate(50px,50px); /*移动*/
}
</style>
</head>
<body>
<div>移动</div>
</body>
</html>效果如下：
缩放(scale)
scale(x,y)
x:为水平缩放,y为垂直缩放,数值为0.01至0.99之间的值,为缩小,而大于1.01的值,为放大;
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div:first-child{
width: 100px;
height: 100px;
background-color: green;
}
div:nth-child(2) {
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
left: 50%;
transform: translate(-50%);
transition: all 0.5s; /*过渡*/
}
div:nth-child(2):hover {
transform: scale(2);
}
</style>
</head>
<body>
<div>原图</div>
<div>缩放</div>
</body>
</html>效果如下：
旋转(rotate)
可以对元素进行旋转,正值顺时针,负值为逆时针
单位:deg,度
transform-origin 设置变形原点
可以调整元素转换变形的原点
默认为transform-origin: center center;
比如改成右下角:transform-origin: bottom right;
也可以为像素
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div:first-child{
width: 100px;
height: 100px;
background-color: green;
}
div:nth-child(2) {
width: 100px;
height: 100px;
background-color: pink;
transition: all 0.5s; /*过渡*/
}
div:nth-child(2):hover {
transform: rotate(90deg);
}
</style>
</head>
<body>
<div>原图</div>
<div>旋转rotate</div>
</body>
</html>效果如下：
倾斜skew(deg,deg)
可以使元素按一定的角度进行倾斜,可为负值,第二个参数不写默认为0;
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div:first-child{
width: 100px;
height: 100px;
background-color: green;
}
div:nth-child(2) {
width: 100px;
height: 100px;
background-color: pink;
transition: all 0.5s; /*过渡*/
}
div:nth-child(2):hover {
transform: skew(-45deg, 0deg);
}
</style>
</head>
<body>
<div>原图</div>
<div>倾斜skew</div>
</body>
</html>效果如下：
