位置:电子教程 > CSS3教程 (如果看不到内容请使用360浏览器) 推荐学习资源
CSS3基础样式
CSS3 高级样式
当前阅读教程: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>
效果图

小白教程网www.2d5.net

image.png

translate值(50px100px)是从左边元素移动50个像素,并从顶部移动100像素。



上一篇: CSS3 2D 转换 下一篇: rotate() 方法
计算机毕业设计作品网      毕业设计文档网      小程序教程网       毕业设计资料网  |         毕业设计定制QQ:45157718(微信同号)(备注:毕设)