使用css制作卡片翻转控件

最新推荐文章于 2024-05-15 10:35:35 发布

zjrichard8

最新推荐文章于 2024-05-15 10:35:35 发布

阅读量817

点赞数

分类专栏：前端开发工程师文章标签： css 翻转 html翻转

本文链接：https://blog.csdn.net/zjrichard8/article/details/50146315

版权

前端开发工程师专栏收录该内容

1 篇文章 0 订阅

订阅专栏

随着前端技术的发展，大家使用css相关的动画已经不仅仅满足淡入淡出或者ppt的简单效果，而是希望可以使用css做一些比较复杂的动画，让我们的网站看起来更炫，这几天使用html+css实现了翻转卡片的效果，在这里分享出来和大家一起讨论下，也希望大家提出意见，让这个demo更加完善。
1.整体思路：
1）定义一个卡片区域，卡片区域包含一个正面展示区和一个背面展示区，让两个展示区重叠，默认展示正面；
2）当光标移动至控件上时，正面翻转180度，背面还原至正常状态，展示背面区域；
控件的大小和位置可以通过css自行定义，同时正面展示区内容和背面展示区的内容页也可以自己定制，这里demo中只使用了图片作为展示区域的内容；
2.相关代码
1）HTML相关代码如下

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
        <title>翻转Demo</title>
    </head>
    <body>
        <div class="cov" style="top:10px;lefe:20px;width:200px;height:200px;">
            <div class="front">
                <img src="./zhugeliang.jpg">
            </div>
            <div class="back">
                <img src="./xunyu.jpg">
            </div>
        </div>
        <div class="cov" style="width:200px;height:200;top:250px;lefe:250px">
            <div class="front">
                <img src="./zhouyu.jpg">
            </div>
            <div class="back">
                <img src="./xushu.jpg">
            </div>
        </div>
    </body>
</html>

2）CSS相关代码如下：

<style type="text/css">
    div.cov{
        position:absolute;  
    }
    div.cov img{
        width: 100%;
        height: 100%;
    }
    div.cov div.front, div.cov div.back{
        position: relative;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        backface-visibility:hidden;
        transition:transform 0.6s ease 0s;
    }
    div.cov div.back{
        top: -100%;
        transform:rotateY(-180deg);
    }   
    div.cov:hover div.front{
        transform:rotateY(180deg);
    }
    div.cov:hover div.back{
        transform:rotateY(0deg);
    }   
</style>