7:----(4) CSS3中的变形--位移 translate()
来源:互联网 发布:手机天使玻璃优化软件 编辑:程序博客网 时间:2024/05/17 05:54
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。
<div class="wrapper">
<div>我向右向下移动</div>
</div>
CSS代码:
.wrapper {
width:200px;
height:200px;
border: 2pxdotted red;
margin: 0auto;
}
.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);
}
演示结果
***相关代码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>位移</title></head><style> div { width: 200px; height: 200px; } .div1 { background-color: red; transform: translateX(-400px); } .div2 { background-color: cyan; transform: translateY(300px); } .div3 { background-color: fuchsia; transform: translate(30px, 40px); }</style><body> <div class="div1">我在水平方向的一个移动</div> <div class="div2">y/竖直轴方向的一个移动</div> <div class="div3">xy轴同时方向的一个移动</div></body></html>***相关效果
阅读全文
0 0
- 7:----(4) CSS3中的变形--位移 translate()
- 【CSS3】变形--位移 translate()
- 变形--位移 translate()
- CSS3中的3D旋转 rotate、3D位移 translate
- 9月29变形--位移 translate()
- translate 位移
- 7:----(2) CSS3中的变形--扭曲 skew()
- 7:---(3)CSS3中的变形--缩放 scale()
- css3中的变形和动画(3)
- CSS3中的变形与动画(下)
- CSS3中的变形与动画(上)
- CSS3中的变形与动画(下)
- CSS3中的transform变形
- CSS3中的transform变形
- CSS3中的transform变形
- CSS3中的变形处理
- CSS3中的变形
- translate位移动画
- 如何提高心里素质
- Java并发编程之synchronized
- C++内存分配方式详解——堆、栈、自由存储区、全局/静态存储区和常量存储区
- 设计模式中类的关系
- Web应用漏洞评估工具Paros
- 7:----(4) CSS3中的变形--位移 translate()
- Java实现国际化
- 使用wireshark分析加密的WIFI数据包
- HDU 5831 Rikka with Parenthesis II 【贪心】
- Hadoop之初识MapReduce(笔记4)
- MyBatis调用带有返回结果、output参数的存储过程上与ibatis的区别
- 比特币改进协议BIP14(翻译)
- 二分法求最大最小值
- 代理服务器基本认识