css實現(xiàn)鏡像翻轉(zhuǎn)的方法有哪些

css實現(xiàn)鏡像翻轉(zhuǎn)的方法有哪些？針對這個問題，今天小編總結(jié)這篇有關(guān)css鏡像翻轉(zhuǎn)的文章，希望能幫助更多想解決這個問題的朋友找到更加簡單易行的辦法。

創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供義縣網(wǎng)站建設(shè)、義縣做網(wǎng)站、義縣網(wǎng)站設(shè)計、義縣網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計與制作、義縣企業(yè)網(wǎng)站模板建站服務(wù)，10多年義縣做網(wǎng)站經(jīng)驗，不只是建網(wǎng)站，更提供有價值的思路和整體網(wǎng)絡(luò)服務(wù)。

要實現(xiàn)鏡像翻轉(zhuǎn)，有兩種實現(xiàn)方法：

方法一：利用css動畫屬性rotate旋轉(zhuǎn)來實現(xiàn)

具體代碼：

.mirrorRotateLevel {
    transform: rotateY(180deg);   /* 水平鏡像翻轉(zhuǎn) */
}
.mirrorRotateVertical {
    transform: rotateX(180deg);   /* 垂直鏡像翻轉(zhuǎn) */
}

此處，rotateY(180deg) 這里的 Y 表示元素以Y軸鏡像翻轉(zhuǎn)，也即水平翻轉(zhuǎn)；同理，  rotateX(180deg) 表示以X軸為鏡像翻轉(zhuǎn)，即垂直翻轉(zhuǎn)。

方法二：各個瀏覽器對鏡像翻轉(zhuǎn)的兼容寫法來實現(xiàn)

.mirrorRotateLevel {          /* 水平鏡像翻轉(zhuǎn) */
    -moz-transform:scaleX(-1);
    -webkit-transform:scaleX(-1);
    -o-transform:scaleX(-1);
    transform:scaleX(-1);
    /*兼容IE*/
    filter:FlipH;
}
.mirrorRotateVertical {        /* 垂直鏡像翻轉(zhuǎn) */
    -moz-transform:scaleY(-1);
    -webkit-transform:scaleY(-1);
    -o-transform:scaleY(-1);
    transform:scaleY(-1);
    /*兼容IE*/
    filter:FlipV;
}

注意： 鏡像翻轉(zhuǎn)和普通旋轉(zhuǎn)不同，鏡像翻轉(zhuǎn)以軸為鏡像，普通旋轉(zhuǎn)以點為鏡像。

HTML部分代碼：

<div id="test">
     <p>測試CSS3下鏡像翻轉(zhuǎn)</p>
     <p class="mirrorRotateLevel">測試CSS3下水平鏡像翻轉(zhuǎn)</p>
     <p class="mirrorRotateVertical">測試CSS3下垂直鏡像翻轉(zhuǎn)</p>
</div>

我們來看一下簡單的效果：

（感興趣的同學(xué)可以將文字換成圖片）

以上就是css實現(xiàn)鏡像翻轉(zhuǎn)的方法，代碼示例簡單明了，如果在日常工作遇到此問題。通過這篇文章，希望你能有所收獲，更多詳情敬請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

本文標(biāo)題：css實現(xiàn)鏡像翻轉(zhuǎn)的方法有哪些
URL分享：http://muchs.cn/article24/pidpje.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)網(wǎng)站制作、企業(yè)建站、App設(shè)計、網(wǎng)站建設(shè)、營銷型網(wǎng)站建設(shè)、網(wǎng)站排名

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)