如何使用HTML5 CSS3控制HTML标签元素移动

CSS3样式transform属性值rotate是控制元素旋转，而它的属性值translate是控制元素移动，一般情况是从一个坐标点移动到另一个坐标点。下面利用一个实例说明HTML5 CSS3控制标签元素移动。

第一步：打开编辑工具并创建静态页面

首先，双击打开HBuilder编辑工具，新建一个名为的静态页面。

第二步：插入div标签元素

在lt;bodygt;标签元素内插入一个lt;divgt;标签，并设置ID属性值为"move"。

第三步：设置div标签元素的样式

利用CSS的ID选择器设置div标签元素的宽度、高度和背景色。

第四步：保存代码并预览页面

保存代码并预览该静态页面，可以看到页面显示一个正方形图形。

第五步：使用CSS3属性transform设置移动效果

使用CSS3属性transform，设置属性值为"translate(100px, 100px)"，表示向下移动100px，向右移动100px。

第六步：保存代码并重新预览页面

再次保存代码并预览该静态页面，可以看到页面移动了100px。

版权声明：本文内容由互联网用户自发贡献，本站不承担相关法律责任.如有侵权/违法内容,本站将立刻删除。