css鏡像翻轉(zhuǎn)效果 css3的圖形3d翻轉(zhuǎn)效果應(yīng)用示例?
css3的圖形3d翻轉(zhuǎn)效果應(yīng)用示例?1、首先打開html文件編輯器,這里使用vscode新建一個html文檔,文檔中寫入基本的html結(jié)構(gòu),然后插入img標(biāo)簽并插入一張圖片,給img一個class屬性
css3的圖形3d翻轉(zhuǎn)效果應(yīng)用示例?
1、首先打開html文件編輯器,這里使用vscode新建一個html文檔,文檔中寫入基本的html結(jié)構(gòu),然后插入img標(biāo)簽并插入一張圖片,給img一個class屬性:
2、然后在上方的head標(biāo)簽中的style標(biāo)簽設(shè)置樣式,這里設(shè)置圖片的寬度和高度并設(shè)置相對定位,然后設(shè)置圖片的鼠標(biāo)懸浮樣式,其中設(shè)置動畫的形式為3d以及設(shè)置圖片3d旋轉(zhuǎn)偏移的角度,添加一個動畫,設(shè)置好延時即可:
3、最后打開瀏覽器,就會看到一個圖片:
4、當(dāng)鼠標(biāo)移動上去,圖片就會自動3d旋轉(zhuǎn)了: