导航：首页 > 开发技术 >

css怎样实现卡片图像翻转效果

发表于：2026-11-04 作者：千家信息网编辑

千家信息网最后更新 2026年11月04日，本篇文章为大家展示了css怎样实现卡片图像翻转效果，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。css翻转图片具体代码示例：HTML代码部分 css图片翻转示

千家信息网最后更新 2026年11月04日css怎样实现卡片图像翻转效果

本篇文章为大家展示了css怎样实现卡片图像翻转效果，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。

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; 　　} 　　.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相同。不设置透视。