2D转换css,CSS新特性之2D转换transform

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

1.位移translate

1.1语法

transform: translate(x,y);//x,y分别表示x轴和y轴上移动的距离

transform: translateX(n);//x轴上移动的位置

transform: translateY(n);//y轴上移动的位置

1.2举例子

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不可以省略*/

}

之前学过几种移动盒子的位置的方法：定位、盒子外边距。

现在又有一种新的方法就是translate,translate最大的优点就是不会影响到其他元素的位置。

1.3盒子水平垂直居中对齐

translate()、translateX()、translateY()中的单位除了是像素以外还可以是百分比

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

(1)结构

(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对行内标签没有影响

结构

123

样式

span {

transform: translate(300px,300px);

}

结果会发现123是不会动的

2.旋转rotate

3.缩放scale

标签：移动,50%,100px,transform,2D,translate,CSS,200px

来源： https://www.cnblogs.com/deer-cen/p/11972139.html