若想看到变换效果，要给图形的盒子设置过渡 transition: 3s
1. 位移
语法：transform: translate(x,y);
其中x表示水平方向的位移（即左右），y表示垂直方向的位移（即上下）。
括号内最多只能有2个值，当只有1个值的时候表示水平位移。
值的大小可以为正数，也可以为负数。当值为负数的时候向反方向移动。
值的单位可以为像素（如100px，-100px），也可以为百分比（如50%，-50%）。当值用百分比来表示的时候，参照的是元素translate所在盒子的大小。
translate属性不脱标！
2. 旋转
语法：transform：rotate();
括号内表示旋转的角度，必须使用单位deg。
当括号内的值为正数时，表示顺时针旋转；为负数时，表示逆时针旋转。
3. 旋转原点的设置
语法：transform-origin: x y;
x表示水平方向，值可以设置为方位值left，center，right；或者像素px；或者百分数%。
y表示垂直方向，值可以设置为方位值top，center，bottom；或者像素px；或者百分数%。
当x或y的值为负数时，旋转原点在盒子之外。
默认旋转原点为所在盒子的中心点：center center。（x和y之间用空格隔开。）
1 <!-- 当鼠标进入path盒子时，风火轮自动向右转动；鼠标移出时风火轮复原 --> 2 <body> 3 <div class="path"> 4 <div class="wheel"> 风火轮 </div> 5 </div> 6 </body> 7 8 <style> 9 /* 此处省略path及风火轮样式，设置鼠标进入盒子时的样式 */ 10 .path:hover .wheel { 11 /* translate()中只有一个值，表示水平移动，上下不动 */ 12 /* rotate()中设置为3600度表示转动十圈 */ 13 transform: translate(1000px) rotate(3600deg); 14 } 15 </style>
如果既要发生位移又要发生旋转，必须在同一个transform内同时设置多个属性，用空格隔开，不能分开写成两个transform。
因为分开写成两个后会使样式发生重叠，展示最后定义的transform。
4. 缩放
语法：transform: scale(x,y);
x表示水平方向（改变图形的宽度），y表示垂直方向（改变图形的高度）。当括号内只有一个值的时候，图形的宽和高同步变换。
括号里的值为数字：（值的正负不会影响图形变换）
- 值=0时，图形消失；
- 0<值<1时，图形缩小为原来的几倍；
- 值=1时，图形不变；
- 值>1时，图形放大为原来的几倍；
5. 倾斜
语法：transform: skew(x,y);
x表示左右倾斜（左边和右边），上下两条边保持水平（常用）。
y表示上下倾斜（上边和下边），左右两条边保持垂直。只有一个值的时候默认为左右倾斜。
值的单位为deg，表示倾斜度数。如60deg。
如果想要盒子内部的某些内容不倾斜，需要单独设置：给字内容加标签，然后设置transform: skew()内的值为负的父标签的值。
（如果给字内容加的标签为行内元素如span，需要用display: block或display: inline-block转换成块级元素或行内块元素。）
1 <!-- 用图形倾斜代替添加背景图片可以加快加载速度 --> 2 <body> 3 <ul> 4 <li> 5 <a href="#"> 6 <span>首页1</span> 7 </a> 8 </li> 9 <li> 10 <a href="#"> 11 <span>首页2</span> 12 </a> 13 </li> 14 <li> 15 <a href="#"> 16 <span>首页3</span> 17 </a> 18 </li> 19 <li> 20 <a href="#"> 21 <span>首页4</span> 22 </a> 23 </li> 24 <li> 25 <a href="#"> 26 <span>首页5</span> 27 </a> 28 </li> 29 <li> 30 <a href="#"> 31 <span>首页6</span> 32 </a> 33 </li> 34 </ul> 35 </body> 36 37 <style> 38 /* 省略ul和a标签的css样式设置 */ 39 li { 40 float: left; 41 background: black; 42 margin-right: 20px; 43 transform: skew(-20deg); 44 } 45 li a span { 46 display: block; 47 transform: skew(20deg); 48 } 49 </style>
6. 盒子居中的方法总结
盒子居中要用到“子绝父相”。即：
子元素设置 position: absolute; 父元素设置 position: relative; 然后设置left、top、margin等值：
1） left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
2） lef: 50%;
top: 50%;
margin-left: -自身宽度一半;
margin-top: -自身宽度一半;
3） left: 50%;
top: 50%;
transform: translate(-50%, -50%);