CSS3中Transform动画属性用法详解
|
副标题[/!--empirenews.page--]
css3在原来的基础上增加了变形和动画相关的属性，动画三兄弟：transform、transition和animation，通过使用这三个属性可以达到很炫酷的效果。需要注意的是这三个属性都是css3新增的属性，各大浏览器支持方面还不是特别好，使用时要特别注意浏览器的兼容性，本文重点介绍Transform的使用方法，具体内容如下 浏览器支持情况： Internet Explorer 10、Firefox、Opera 支持 transform 属性。 Internet Explorer 9 支持替代的 -ms-transform 属性（仅适用于 2D 转换）。 Safari 和 Chrome 支持替代的 -webkit-transform 属性（3D 和 2D 转换）。 Opera 只支持 2D 转换。 2D transform变换方法
•translate(x, y)方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。x, y的值可以取正负，分别表示表示向不同的方向偏移。
XML/HTML Code复制内容到剪贴板
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>transform 2D演示</title> <style type="text/css"> #container{ width: 700px; height: 120px; border: 1px solid blue; margin: 20px auto; padding: 20px 20px; } #div1 ,#div2, #div3, #div4{ height: 100px; width: 100px; border: 1px dashed red; display: inline-block; } #div1 div{ height: 100px; width: 100px; background: #63F7ED; transform:translate(20px,10px); /* W3C标准 */ -ms-transform:translate(20px,10px); /* IE 9 */ -moz-transform:translate(20px,10px); /* Firefox */ -webkit-transform:translate(20px,10px); /* Safari 和 Chrome */ -o-transform:translate(20px,10px); /* Opera */ } #div2{margin-left: 50px;} #div2 div{ height: 100px; width: 100px; background: #63F7ED; transform:rotate(45deg); /* W3C标准 */ -ms-transform:rotate(45deg); /* IE 9 */ -moz-transform:rotate(45deg); /* Firefox */ （编辑：核心网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
