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是不会动的