当前阅读教程:CSS3教程 > translate() 方法 | |
阅读(22555525) 收藏 赞(5685) 分享 | |
上一篇: CSS3 2D 转换 | 下一篇: rotate() 方法 |
translate()方法,根据左(X轴)和顶部(Y轴)位置给定的参数,从当前元素位置移动。 实例代码<!doctype html> <html> <head> <meta charset="utf-8"> <title>translate() 方法</title> <!--定义内部样式--> <style> div{ width:100px;/*宽度*/ height:75px;/*高度*/ background-color:yellow;/*背景颜色*/ border:1px solid black;/*边框*/ } .div2{ transform:translate(50px,100px); -ms-transform:translate(50px,100px); /* IE 9 */ -moz-transform:translate(50px,100px); /* Firefox */ -webkit-transform:translate(50px,100px); /* Safari and Chrome */ -o-transform:translate(50px,100px); /* Opera */ } </style> </head> <body> <div>你好。这是一个 div 元素。</div> <div>你好。这是一个 div 元素。</div> </body> </html> 效果图translate值(50px,100px)是从左边元素移动50个像素,并从顶部移动100像素。 |
|
上一篇: CSS3 2D 转换 | 下一篇: rotate() 方法 |