transform是css3中具有颠覆性特征之一，，可以实现元素的位移、旋转、缩放等效果

1.位移translate 1.1语法 transform: translate(x,y);//x,y分别表示x轴和y轴上移动的距离 transform: translateX(n);//x轴上移动的位置 transform: translateY(n);//y轴上移动的位置 1.2举例子 <style type="text/css"> div { width: 200px; height: 200px; background-color: pink; /*transform: translate(100px,100px);*/ /*仅水平方向移动100px*/ /*transform: translateX(100px);*/ /*transform: translate(100px,0);但是y方向的0不可以省略*/ /*仅垂直方向移动100px*/ transform: translateY(100px); /*transform: translate(0,100px);仅垂直方向移动100px但是x方向的0不可以省略*/ } </style>

之前学过几种移动盒子的位置的方法：定位、盒子外边距。
现在又有一种新的方法就是translate,translate最大的优点就是不会影响到其他元素的位置。

1.3盒子水平垂直居中对齐

translate()、translateX()、translateY()中的单位除了是像素以外还可以是百分比
translate中的百分比单位是相对于自身元素的宽和高translate:(50%,50%)，利用该方法可以实现盒子水平垂直居中对齐。
(1)结构

<div> <p></p> </div>

(2)样式

div { position: relative; height: 500px; width: 500px; background-color: pink; } p { position: absolute; top: 50%; left: 50%; /*1.以前的写法*/ /*margin-top: -100px; margin-left: -100px; 100px就是p盒子宽高(200px)的一半*/ /*2.现在的写法*/ transform: translate(-50%,-50%);/*向X轴、Y轴负方向走自身宽度的一半*/ width: 200px; height: 200px; background-color: purple; } 1.4 translate对行内标签没有影响

结构

<span>123</span>

样式

span { transform: translate(300px,300px); }

结果会发现123是不会动的

2.旋转rotate 3.缩放scale

CSS新特性之2D转换transform