<div class="wrapper">
<div class="inner">
</div>
</div>
<style>
.wrapper {
width: 300px;
height: 300px;
/* solid - 实线 */
/* dashed - 虚线 */
border: 1px dashed red;
margin: 0 auto;
}
.inner {
width: 300px;
height: 300px;
border: 1px solid green;
}
</style>
border: 1px dashed red; solid为实线；dashed为虚线。
margin: 0 auto;，margin后面如果只有两个参数的话，第一个表示top和bottom，第二个表示left和right。
因为0 auto，表示上下边界为0，左右则根据宽度自适应相同值（即居中）。
1、translate()（平移）
1.1、X轴偏移
.inner {
width: 200px;
height: 200px;
border: 1px solid green;
/*
*X轴方向偏移
*/
/* 1、正向偏移水平长度的50% ，也就是宽度的一半100px*/
transform: translate(50%);
/* 2、正向偏移100px */
transform: translateX(100px);
/* 3、正向偏移100px */
transform: translate(100px);
}
如上图所示，X轴偏移的方法有如下三个
transform: translate(100px)transform: translate(50%)transform: translateX(100px)
1.2Y轴偏移
.inner {
width: 300px;
height: 300px;
border: 1px solid green;
/*
*Y轴方向偏移
*/
/* 正向偏移100px */
transform: translate(0,100px);
transform: translateY(100px);
}
如上图所示，Y轴偏移的方法有如下两个
transform: translate(0,100px)transform: translateY(100px)
1.3、X、Y轴都发生偏移
如上图所示，Y轴偏移的方法有如下一个
.inner {
width: 300px;
height: 300px;
border: 1px solid green;
/*
*X、Y轴方向偏移
*/
/* X/Y正向偏移100px */
transform: translate(100px,100px);
}
注意：上述所说的都是X和Y轴的正向偏移，我们也可以给它设置成负数，使其往反向偏移，如transform: translate(-100px)；即为向x轴的反向（左侧）偏移了100px。
2、scale()（缩放）
该函数只接受数字，不接受类似于”100px“。
2.1、X轴缩放
.inner {
width: 300px;
height: 300px;
border: 1px solid green;
/*
*X轴缩放
*/
transform: scale(2,1);
transform: scaleX(2);
}
如上图所示，X轴缩放的方法有如下两个
transform: scale(2,1)transform: scaleX(2)
2.2、Y轴缩放
.inner {
width: 300px;
height: 300px;
border: 1px solid green;
/*
*Y轴
*/
transform: scale(1,2);
transform: scaleY(2);
}
如上图所示，Y轴缩放的方法有如下两个
transform: scale(1,2)transform: scaleY(2)
2.3、X/Y轴缩放
.inner {
width: 300px;
height: 300px;
border: 1px solid green;
/*
*X、Y轴
*/
transform: scale(2);
transform: scale(2,2);
}
如上图所示，Y轴缩放的方法有如下两个
transform: scale(2)transform: scale(2,2)
3、rotate()（旋转）
该函数只接受一个参数，也就是角度。
.inner {
width: 300px;
height: 300px;
border: 1px solid green;
/* deg - 一圈等于360deg */
transform: rotate(120deg);
/* grad - 一圈等于400grad */
transform: rotate(120grad);
/* rad -一圈等于6.28rad */
transform: rotate(1rad);
/* turn - 一圈等于1turn */
transform: rotate(0.3turn);
}
角度可以由以下四种不同的单位类型来定义。
deg：一圈等于360deg。grad：一圈等于400grad。rad：一圈等于6.28rad。turn：一圈等于1turn。
4、skew()（倾斜）
该函数只接受一个参数，也就是角度。
.inner {
width: 300px;
height: 300px;
border: 1px solid green;
/*
*X轴
*/
transform: skew(20deg);
transform: skewX(20deg);
/*
*Y轴
*/
transform: skewY(20deg);
/*
*X/Y轴
*/
transform: skew(20deg,20deg);
}
4.1、X轴倾斜
如上图所示，X轴倾斜的方法有如下两个
transform: skew(20deg)transform: skewX(20deg)
4.2、Y轴倾斜
如上图所示，Y轴倾斜的方法有如下一个
transform: skewY(20deg)
4.3、X/Y轴倾斜
如上图所示，X/Y轴倾斜的方法有如下一个
transform: skew(20deg,20deg)
