您好,登錄后才能下訂單哦!
這篇文章給大家分享的是有關css實現(xiàn)卡片圖像翻轉(zhuǎn)效果的方法的內(nèi)容。小編覺得挺實用的,因此分享給大家做個參考。一起跟隨小編過來看看吧。
css翻轉(zhuǎn)(圖片)具體代碼示例:
HTML代碼部分
<div class="display back"> <h4>css圖片翻轉(zhuǎn)示例</h4> </div> </div> </div> <div class="wrap"> <div class="image"> <div class="display front"> <img src="img.jpg" alt="" /> </div>
css代碼部分:
* { padding: 0; margin: 0; } body { background-color: rgb(244, 244, 244); } .wrap { -webkit-perspective:400; -moz-perspective:400; float: left; width: 220px; margin-right: 20px; } .image { width: 100%; height: 200px; -webkit-transform-style:preserve-3d; -webkit-transition:1.5s; -moz-transform-style:preserve-3d; -moz-transition:1.5s; } img { width: 220px; height: 200px; } .wrap:hover .image { -webkit-transform:rotateY(180deg); -moz-transform:rotateY(180deg); } .display { position: absolute; -webkit-backface-visibility:hidden; -moz-backface-visibility:hidden; } .display h4 { color: white; text-align: center; } .back { -webkit-transform:rotateY(180deg); -moz-transform:rotateY(180deg); background: -webkit-gradient(linear,left top,left bottom,from(#fdbb5a), to(#db5726)); background: -moz-linear-gradient(top,#fdbb5a,#db5726); width: 220px; height: 200px; line-height: 200px; }
以上代碼效果如下圖:
css卡牌翻轉(zhuǎn)效果,能讓你看到一張卡片的正反兩面上的內(nèi)容。
注:perspective 屬性定義 3D 元素距視圖的距離,以像素計。該屬性允許您改變 3D 元素查看 3D 元素的視圖。
當為元素定義 perspective 屬性時,其子元素會獲得透視效果,而不是元素本身。perspective 屬性只影響 3D 轉(zhuǎn)換元素。
可能的值有:
number 元素距離視圖的距離,以像素計。
none 默認值。與 0 相同。不設置透視。
感謝各位的閱讀!關于css實現(xiàn)卡片圖像翻轉(zhuǎn)效果的方法就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,讓大家可以學到更多知識。如果覺得文章不錯,可以把它分享出去讓更多的人看到吧!
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權內(nèi)容。