這篇文章給大家分享的是有關css實現(xiàn)卡片圖像翻轉效果的方法的內容。小編覺得挺實用的，因此分享給大家做個參考。一起跟隨小編過來看看吧。
為沂南等地區(qū)用戶提供了全套網(wǎng)頁設計制作服務，及沂南網(wǎng)站建設行業(yè)解決方案。主營業(yè)務為成都網(wǎng)站設計、網(wǎng)站制作、沂南網(wǎng)站設計，以傳統(tǒng)方式定制建設網(wǎng)站，并提供域名空間備案等一條龍服務，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務。我們深信只要達到每一位用戶的要求，就會得到認可，從而選擇與我們長期合作。這樣，我們也可以走得更遠！
css翻轉（圖片）具體代碼示例：
HTML代碼部分
css圖片翻轉示例
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卡牌翻轉效果，能讓你看到一張卡片的正反兩面上的內容。
注：perspective 屬性定義 3D 元素距視圖的距離，以像素計。該屬性允許您改變 3D 元素查看 3D 元素的視圖。
當為元素定義 perspective 屬性時，其子元素會獲得透視效果，而不是元素本身。perspective 屬性只影響 3D 轉換元素。
可能的值有：
number 元素距離視圖的距離，以像素計。
none 默認值。與 0 相同。不設置透視。
感謝各位的閱讀！關于css實現(xiàn)卡片圖像翻轉效果的方法就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
