CSS3中使用translate() 方法实现元素位置的移动
生活随笔
收集整理的這篇文章主要介紹了
CSS3中使用translate() 方法实现元素位置的移动
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
translate() 方法
通過(guò) translate() 方法，元素從其當(dāng)前位置移動(dòng)，根據(jù)給定的 left（x 坐標(biāo)） 和 top（y 坐標(biāo)） 位置參數(shù)：
實(shí)例
div { transform: translate(50px,100px); -ms-transform: translate(50px,100px); /* IE 9 */ -webkit-transform: translate(50px,100px); /* Safari and Chrome */ -o-transform: translate(50px,100px); /* Opera */ -moz-transform: translate(50px,100px); /* Firefox */ }值 translate(50px,100px) 把元素從左側(cè)移動(dòng) 50 像素，從頂端移動(dòng) 100 像素。
實(shí)例：
| 1234567891011121314151617181920212223242526 | <!DOCTYPE?html><html><head><style>?div{width:100px;height:75px;background-color:yellow;border:1px?solid?black;}div#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>你好。這是一個(gè)?div?元素。</div><div?id="div2">你好。這是一個(gè)?div?元素。</div></body></html> |
總結(jié)
以上是生活随笔為你收集整理的CSS3中使用translate() 方法实现元素位置的移动的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： CSS3中的透明属性opacity的用法
- 下一篇： 关于CSS3实现响应式布局的一些概念和术