css3卡片3D翻转翻面

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
</head>
<style>
    html,
    body {
        width: 100%;
        height: 100%;
    }

    .contant {
        position: relative;
        width: 100px;
        height: 200px;
        margin: 0 auto;
        margin-top: 200px;
        perspective: 800px;
        /* 这个是css3的翻转功能，但是要想实现3d效果还要加上景深perspective: 800px; */
    }

    .zheng {
        width: 100px;
        height: 200px;
        position: absolute;
        /* background: blue; */
        left: 0;
        top: 0;
        transition: 1s all; 
        /* 过渡动画 */
        background-image: url('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537963190298&di=99157f801585efa899730e94f40fd062&imgtype=0&src=http%3A%2F%2Fpic28.photophoto.cn%2F20130924%2F0005018337538847_b.jpg');
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }

    .fan {
        width: 100px;
        height: 200px;
        position: absolute;
        background: greenyellow;
        left: 0;
        top: 0;
        /* text-indent: 2em; */
        transform: rotateY(180deg);
        
        backface-visibility: hidden;
        /* 这个属性的作用就是翻转过去的内容被隐藏了，所以我们只能看到一个面的内容。就达到了一个卡片2个面切换显示。  */
        transition: 1s all;
        font-size: 14px;
        color: red;
        /* padding:20px 10px; */
        box-sizing: border-box;
    }

    .contant:hover .zheng {
        transform: rotateY(-180deg);
        /* Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。 */
    }

    .contant:hover .fan {
        transform: rotateY(0deg);
    }
</style>

<body>
    <div class="contant">
        <div class="zheng">

        </div>
        <div class="fan">
            <p>姓名：娜美</p>
            <p>来自：海贼王</p>
            <p>年龄：22</p>
            <p>相关亲人：暂无</p>
            <p>简介：暂无</p>

        </div>
    </div>
</body>

</html>

解释都在代码里面，主要用的css3中的tramsfrom与tansition，

还有3D效果化的属性：perspective:800px；

backface-visibility:这个属性的作用就是翻转过去的内容被隐藏了，所以我们只能看到一个面的内容

css3卡片3D翻转翻面

猜你喜欢