css怎樣實現卡片圖像翻轉效果

本篇文章為大家展示了css怎樣實現卡片圖像翻轉效果，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。

css翻轉圖片具體代碼示例：

　　HTML代碼部分

<divclass="displayback">
 
　　<h4>css圖片翻轉示例</h4>
 
　　</div>
 
　　</div>
 
　　</div>
 
　　<divclass="wrap">
 
　　<divclass="image">
 
　　<divclass="displayfront">
 
　　<imgsrc="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;
 
　　}
 
　　.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卡牌翻轉效果，能讓你看到一張卡片的正反兩面上的內容。

　　注：perspective屬性定義3D元素距視圖的距離，以像素計。該屬性允許您改變3D元素查看3D元素的視圖。

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

　　可能的值有：

　　number元素距離視圖的距離，以像素計。

　　none默認值。與0相同。不設置透視。

css的全稱是什么

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

上述內容就是css怎樣實現卡片圖像翻轉效果，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。