39. CSS3变形之位移 translate()
translate()
函数可以将元素向指定的方向移动,类似于position
中的relative
。或以简单的理解为,使用translate()
函数,可以把元素从原来的位置移动,而不影响在 X、Y 轴上的任何 Web 组件。
translate 我们分为三种情况:
1、translate(x,y)
水平方向和垂直方向同时移动(也就是 X 轴和 Y 轴同时移动)
2、translateX(x)
仅水平方向移动(X 轴移动)
3、translateY(Y)
仅垂直方向移动(Y 轴移动)
实例演示:
通过translate()
函数将元素向 Y 轴下方移动 50px,X 轴右方移动 100px。
HTML 代码:
<div class="wrapper"> <div>我向右向下移动</div> </div>
CSS 代码:
.wrapper { width: 200px; height: 200px; border: 2px dotted red; margin: 20px auto; } .wrapper div { width: 200px; height: 200px; line-height: 200px; text-align: center; background: orange; color: #fff; -webkit-transform: translate(50px,100px); -moz-transform:translate(50px,100px); transform: translate(50px,100px); }
效果如下:
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 39. CSS3变形之位移 translate()
码云笔记 » 39. CSS3变形之位移 translate()