transform实现元素的移动、缩放、旋转、变形
既然用到了transform就先说说这个属性吧！
一、transform属性简介
Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。现在暂时先说说属性和2D的转换吧！3D学习的成本，需要设备的性能和浏览器支持来支撑！所以先介绍3D的效果。
用法：transform:translate(-50%,-50%)
| 值 | 描述 |
|---|---|
| translate(x,y) | 定义 2D 移动。x为左右移动，y为上下移动！可以为负值，单位px，百分比，em等 |
| scale(x,y) | 定义 2D 缩放。x为宽度的缩放，y为高度的缩放！值为数值，0-n倍，小于1是缩小 |
| rotate(angle) | 定义 2D 旋转，在参数中规定角度。0-360度，单位deg |
| skew(x-angle,y-angle) | 定义沿着 X 和 Y 轴的 2D 倾斜转换。简单点相当于PhotoShop里面的斜放属性，基本很少用到 |
二丶介绍下他们的使用情况吧
首先，先写个字体出来吧！就一我上一篇介绍的火焰字好了！上篇的代码对这篇的代码不会有干扰的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小效果</title>
<style type="text/css">
/*通配符重置浏览器默认的两个值，
对本文没有太大影响，不知道可以无视*/
*{
margin: 0;
padding: 0;
}
.div1{
width: 300px;
height: 100px;
padding-top: 20px;
line-height: 100px;
margin:200px auto 0;
text-align: center;
font-size: 40px;
font-weight: bold;
font-family: "华文行楷";
background: #000;
color:#F60;
text-shadow: 0px 0px 2px #fff,
0px -3px 3px #1EB,
0px -6px 4px #01DEFD,
0px -9px 5px #0BF,
0px -12px 6px #08F;
}
</style>
</head>
<body>
<div class="div1">超炫火焰字</div>
</body>
</html>
效果如图：
1.translate值的作用
我们在text-shadow后面添加一个transform属性先是移动吧！
transform:translate(20%,0);
我们就会发现这个div被右移动了20%
这个20%是对于这个div来说的；也就是说移动的这个div的百分之20%，60px的距离
在这里我提一句就是绝对定位的问题，当元素添加如下属性时
position: absolute;top: 50%;transform: translate(0,-50%);
那么这个元素就会相对于祖先有设有position属性的垂直居中定位了，如果先辈没有设有position属性就会相对屏幕垂直居中了
对于translate这个值的负值玩法，上下移动就由你们去尝试咯
2.scale值的作用
我们在将translate改为scale吧！代码如下
transform:scale(1.2,0);
我们就会发现这个div被拉伸了1.2
这个1.2是对于这个div来说的；也就是说的这个div的宽度被拉长了，宽度变为了原来的1.2倍
这个scale常常被用到购物商城的鼠标移进时图片被放大的效果里，并且不会对原来的布局产生任何变化和影响
对于scale这个值的负值玩法，拉伸成啥样子就由你们去尝试咯
3.rotate值的作用
我们在将scale改为rotate吧！代码如下
transform:rotate(45deg);
我们就会发现这个div被旋转了45度
旋转的原点为div盒子的中心点，设置了45deg就旋转了45deg
对于rotate这个值的负值玩法，其实360deg就旋转了一圈，相当于回到了原位即相当于0deg了，负值就是向左方向旋转了
4.skew值的作用
这个值的是扭曲，斜视某个对象而已，很少用到，就不做介绍了
7980
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
