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;
 
　　}
 
　　.displayh4{
 
　　color:white;
 
　　text-align:center;
 
　　}
 
　　.back{
 
　　-webkit-transform:rotateY(180deg);
 
　　-moz-transform:rotateY(180deg);
 
　　background:-webkit-gradient(linear,lefttop,leftbottom,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元素距視圖的距離，以像素計(jì)。該屬性允許您改變3D元素查看3D元素的視圖。

當(dāng)為元素定義perspective屬性時，其子元素會獲得透視效果，而不是元素本身。perspective屬性只影響3D轉(zhuǎn)換元素。

可能的值有：

number元素距離視圖的距離，以像素計(jì)。

none默認(rèn)值。與0相同。不設(shè)置透視。

css的全稱是什么

css的全稱是Cascading Style Sheets（層疊樣式表），它是一種用來表現(xiàn)HTML或XML等文件樣式的計(jì)算機(jī)語言。CSS不僅可以靜態(tài)地修飾網(wǎng)頁，還可以配合各種腳本語言動態(tài)地對網(wǎng)頁各元素進(jìn)行格式化。

上述內(nèi)容就是css怎樣實(shí)現(xiàn)卡片圖像翻轉(zhuǎn)效果，你們學(xué)到知識或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識儲備，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。