梦想之家

CSS3中的变形--位移 translate()

translate()函数可以将元素向指定的方向移动,类似于position中的relative。或以简单的理解为,使用translate()函数,可以把元素从原来的位置移动,而不影响在X、Y轴上的任何Web组件。

translate我们分为三种情况:

1、translate(x,y)水平方向和垂直方向同时移动(也就是X轴和Y轴同时移动)

2、translateX(x)仅水平方向移动(X轴移动)

3、translateY(Y)仅垂直方向移动(Y轴移动)



例如:不知道宽度和高度的元素实现水平垂直居中。

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8">
<title>变形与动画</title>
<link href="style.css" rel="stylesheet" type="text/css">
<style>
    .wrapper {
      padding: 20px;
      background:orange;
      color:#fff;
      position:absolute;
      top:50%;
      left:50%;
      border-radius: 5px;
      -webkit-transform:translate(-50%,-50%);
      -moz-transform:translate(-50%,-50%);
      -ms-transform:translate(-50%,-50%);
      -o-transform:translate(-50%,-50%);
      transform:translate(-50%,-50%);
    }
</style>
</head> 
<body>
<div class="wrapper">
我不知道我的宽度和高是多少,我要实现水平垂直居中    
</div>
</body>
</html>

效果如下图所示:
2017-03-16_203649.png

相关推荐

您此刻的心情: