translate 位移

àì夳堔傛蜴生んèń 2022-06-03 09:15 162阅读 0赞

1、

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style>
    		.d1{
    			width: 200px;
    			height: 200px;
    			border: 2px dotted red;
    		}
    		.d1 div{
    			width: 200px;
    			height: 200px;
    			line-height: 200px;
    			text-align: center;
    			background: orange;
    			color: #FFF;
    			-webkit-transform: translateX(100px);
    			-moz-transform: translateX(100px);
    			transform: translateX(100px);
    		}
    	</style>
    </head>
    <body>
    	<div class="d1">
    		<div>我向右向下移动</div>
    	</div>
    </body>
    </html>

2、

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style>
    		.d1{
    			width: 200px;
    			height: 200px;
    			border: 2px dotted red;
    		}
    		.d1 div{
    			width: 200px;
    			height: 200px;
    			line-height: 200px;
    			text-align: center;
    			background: orange;
    			color: #FFF;
    			-webkit-transform: translateY(100px);
    			-moz-transform: translateY(100px);
    			transform: translateY(100px);
    		}
    	</style>
    </head>
    <body>
    	<div class="d1">
    		<div>我向右向下移动</div>
    	</div>
    </body>
    </html>

3、

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style>
    		.d1{
    			width: 200px;
    			height: 200px;
    			border: 2px dotted red;
    		}
    		.d1 div{
    			width: 200px;
    			height: 200px;
    			line-height: 200px;
    			text-align: center;
    			background: orange;
    			color: #FFF;
    			-webkit-transform: translate(100px,100px);
    			-moz-transform: translate(100px 100px);
    			transform: translate(100px,100px);
    		}
    	</style>
    </head>
    <body>
    	<div class="d1">
    		<div>我向右向下移动</div>
    	</div>
    </body>
    </html>

4、

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style>
    		.d1{
    			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%);
    			transform: translate(-50%,-50%);
    		}
    	</style>
    </head>
    <body>
    	<div class="d1">
    		不知道宽和高，实现水平垂直居中
    	</div>
    </body>
    </html>

参考链接：

[点击打开链接][Link 1]

[Link 1]: http://blog.csdn.net/happyhaojie/article/details/50731375