css-transform-案例-翻转牌效果

思路

外部盒子包两个盒子

外部盒子绝对定位，内部两盒子相对定位

外部盒子hover触发内部盒子的变形

内部盒子变形的具体调整

完整代码

<style>
    .outter{
        border: 2px solid black;
        position:relative;
        width: 800px;
        height: 300px;
    }
    .outter div{
        width: 300px;
        height: 300px;
    }
    .pic{
        background-color: #a1a1a1;
        position:absolute;
        left:0px;
        top:0px;
        transform:perspective(800px) rotateY(0deg);
        backface-visibility: hidden;
        transition:all 1s linear;
    }
    .outter:hover .pic{
        transform:perspective(800px) rotateY(180deg);

    }

    .txt{
        background-color: #ff5cc9;
        position: absolute;
        left:0px;
        top:0px;
        transform:perspective(800px) rotateY(-180deg);
        backface-visibility: hidden;
        transition:all 1s linear;    }
    .outter:hover .txt{
        transform:perspective(800px) rotateY(0deg);

    }


</style>


<div class="outter">
    <div class="pic"></div>
    <div class="txt"><h1>i am content</h1></div>
</div>