溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
今天就跟大家聊聊有關(guān)html5和css3中如何設(shè)置圖片的翻轉(zhuǎn)，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。
在html5和css3中，可利用transform屬性設(shè)置圖片翻轉(zhuǎn)，該屬性可對元素進(jìn)行旋轉(zhuǎn)、縮放等操作，當(dāng)該屬性與rotateX()函數(shù)配合使用時(shí)，可設(shè)置元素垂直翻轉(zhuǎn)樣式，語法為“元素{transform:rotateX(翻轉(zhuǎn)角度);}”。
本教程操作環(huán)境：windows10系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
想要實(shí)現(xiàn)圖片的翻轉(zhuǎn)效果，可以通過transform屬性，transform屬性可以對元素進(jìn)行旋轉(zhuǎn)、縮放、移動(dòng)或傾斜或翻轉(zhuǎn)等操作。
當(dāng)屬性與rotateX()函數(shù)配合使用時(shí)，就可以設(shè)置元素垂直翻轉(zhuǎn)的樣式了。
示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.img1{
transform:rotateX(180deg);
}
</style>
</head>
<body>
<img src="1115.08.png" class="img1"><br>
<img src="1115.08.png">
</body>
</html>輸出結(jié)果：
css的基本語法是：1、css規(guī)則由選擇器和一條或多條聲明兩個(gè)部分構(gòu)成；2、選擇器通常是需要改變樣式的HTML元素；3、每條聲明由一個(gè)屬性和一個(gè)值組成；4、屬性和屬性值被冒號分隔開。
看完上述內(nèi)容，你們對html5和css3中如何設(shè)置圖片的翻轉(zhuǎn)有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請關(guān)注億速云行業(yè)資訊頻道，感謝大家的支持。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機(jī)網(wǎng)站二維碼