CSS3樣式transform屬性值rotate是控制元素旋轉(zhuǎn)，而它的屬性值translate是控制元素移動(dòng)，一般情況是從一個(gè)坐標(biāo)點(diǎn)移動(dòng)到另一個(gè)坐標(biāo)點(diǎn)。下面利用一個(gè)實(shí)例說(shuō)明HTML5 CSS3控制標(biāo)簽

CSS3樣式transform屬性值rotate是控制元素旋轉(zhuǎn)，而它的屬性值translate是控制元素移動(dòng)，一般情況是從一個(gè)坐標(biāo)點(diǎn)移動(dòng)到另一個(gè)坐標(biāo)點(diǎn)。下面利用一個(gè)實(shí)例說(shuō)明HTML5 CSS3控制標(biāo)簽元素移動(dòng)。

第一步：打開編輯工具并創(chuàng)建靜態(tài)頁(yè)面

首先，雙擊打開HBuilder編輯工具，新建一個(gè)名為的靜態(tài)頁(yè)面。

第二步：插入div標(biāo)簽元素

在lt;bodygt;標(biāo)簽元素內(nèi)插入一個(gè)lt;divgt;標(biāo)簽，并設(shè)置ID屬性值為"move"。

第三步：設(shè)置div標(biāo)簽元素的樣式

利用CSS的ID選擇器設(shè)置div標(biāo)簽元素的寬度、高度和背景色。

第四步：保存代碼并預(yù)覽頁(yè)面

保存代碼并預(yù)覽該靜態(tài)頁(yè)面，可以看到頁(yè)面顯示一個(gè)正方形圖形。

第五步：使用CSS3屬性transform設(shè)置移動(dòng)效果

使用CSS3屬性transform，設(shè)置屬性值為"translate(100px, 100px)"，表示向下移動(dòng)100px，向右移動(dòng)100px。

第六步：保存代碼并重新預(yù)覽頁(yè)面

再次保存代碼并預(yù)覽該靜態(tài)頁(yè)面，可以看到頁(yè)面移動(dòng)了100px。