13518219792

NEWS

网站建设资讯

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

css的全称是什么

css的全称是Cascading Style Sheets（层叠样式表），它是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

上述内容就是css怎样实现卡片图像翻转效果，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注创新互联行业资讯频道。