0×1.元素平移
让元素在页面显示中产生位移有很多方法，可以利用块状元素合模型，也可以利用相对和绝对坐标，这一小节给大家介绍css提供的两个元素移动属性：vertical-align和transform；transform为css3标准提供的新属性。
a.内联元素垂直平移
内联元素的平移遵循下面的法则：
默认情况下，元素移动，负值往下，正值往上；
如果默认基线在上面，用负数；
如果默认基线在下面，用正值；
下面用一个实例来演示上面这三条法则：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>内联元素垂直平移实例</title>
<style type="text/css">
<!--设置div的宽高背景色-->
#d1{
width: 250px;
height: 150px;
background-color: pink;
color: black;
}
<!--默认情况下div中span的基准线在上方，所以使用负值让div中的span元素往下移动50px-->
#d1 span{
vertical-align: -50px;
}
<!--不允许调整textarea大小-->
#tx1{
resize: none;
}
<!--在textarea文本框前面的span，默认基准线在下方（与textarea的底部对齐），所以使用正值，让span标签往上移动35px-->
#sp1{
vertical-align: 35px;
}
</style>
</head>
<body>
<div id="d1">
<span>www.111cn.net</span>
</div>
<br>
<span id="sp1">自我介绍：</span><textarea name="myself" id="tx1" cols="10" rows="5"></textarea>
</body>
</html>
显示效果：
www.111cn.net
自我介绍：
b.块状元素平移
所有内联元素都可以使用display属性转换成块状元素，然后使用本节内容介绍的平移方法，transform属性是css3提供的新属性，请看下面的实例：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>块状元素平移实例</title>
<style type="text/css">
#d1{
width: 250px;
height: 250px;
background-color: pink;
}
<!--未设置平移前，d2应该紧贴着d1上左边框，本例让d2往右偏移50px，往下偏移100px（如果是负值就是往反方向），若是想单独设置一个方向上的平移，可以将不需要设置的方向上的值用0px代替，例如transform:translate(50px,0px);，除此之外css还提供了两个子属性translateX和translateY，分别用于设置X方向（左右，正右负左）和Y方向（上下，正下负上）上的偏移量。-->
#d2{
background-color: green;
width: 50px;
height: 50px;
transform:translate(50px,100px);
}
</style>
</head>
<body>
<div id="d1">
<div id="d2"></div>
</div>
</body>
</html>
显示效果：
0×2.元素变形
a.等比例缩放
等比例缩放能够使元素等比扩大或缩小我们设定的倍数，语法如下：
transform: scale(n);
n默认为1，元素保持正常大小显示，超过1就是等比扩大多少倍（长宽同时扩大），小于1就是等比缩小多少倍；
除此之外，同translate一样，scale也可以单独设置某一条边的缩放，scaleX(n)单独扩大或缩小元素宽度，scaleY(n)单独扩大或缩小元素高度。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>块状元素缩放实例</title>
<style type="text/css">
<!--d1的原始宽高是100px，默认情况下会显示一个正方形，现在使用scale将其宽度扩充2倍，高度缩小成原来的一半，这种缩放或扩充会影响到其内部的所有元素-->
#d1{
width: 100px;
height: 100px;
background-color: pink;
transform:scale(2,0.5);
color:black;
}
</style>
</head>
<body>
<div id="d1">www.111cn.net</div>
</body>
</html>
显示效果：
b.旋转
块状元素的旋转可以通过transform的rotate值来实现，请看下面的实例：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>块状元素旋转实例</title>
<style type="text/css">
<!--将d1顺时针旋转45度，如果要逆时针旋转，设置成负值即可-->
#d1{
width: 100px;
height: 100px;
background-color: pink;
transform:rotate(45deg);
}
</style>
</head>
<body>
<div id="d1"></div>
</body>
</html>
显示效果：
默认情况下，元素旋转的基准点为块状元素的中心点，可以通过设置transform-origin属性来改变旋转的基准点位置，请看下面的实例：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>设置旋转基准点实例</title>
<style type="text/css">
#d1{
width: 50px;
height: 50px;
margin: 20px;
background-color: pink;
transform:rotate(30deg);
}
<!--设置基准点为div左上角原点（top left），默认为transform-origin:center center;即中心点，图形基准点位置保持不变，绕着基准点旋转;-->
#d2{
width: 50px;
height: 50px;
margin: 20px;
background-color: pink;
transform:rotate(30deg);
transform-origin:0 0;
}
</style>
</head>
<body>
<div id="d1"></div>
<br>
<div id="d1"></div>
</body>
</html>
显示效果：
c.倾斜
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>块状元素倾斜实例</title>
<style type="text/css">
#d1{
width: 100px;
height: 100px;
background-color: pink;
<!--X轴倾斜45度，正值向左，负向右，同transform:skewX(45deg);-->
transform:skew(45deg,0deg);
}
#d2{
width: 100px;
height: 100px;
background-color: pink;
<!--Y轴倾斜45度，正值向下，负向上，同transform:skewY(45deg);-->
transform:skew(0deg,45deg);
}
</style>
</head>
<body>
<div id="d1"></div>
<br>
<div id="d2"></div>
</body>
</html>