h5-transform二维变换-扑克牌小案例

html代码：6张扑克牌

<div class="pkBox">
    <img src="../img/pk1.jpg" alt="">
    <img src="../img/pk2.jpg" alt="">
    <img src="../img/pk3.jpg" alt="">
    <img src="../img/pk4.jpg" alt="">
    <img src="../img/pk5.jpg" alt="">
    <img src="../img/puke.jpg" alt="">
</div>

css代码

    <style>
        .pkBox{
            width: 250px;
            height: 344px;
            position: relative;
            margin: 300px auto;
        }
        .pkBox > img{
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            transition: transform 1s;
            transform-origin: right top;
        }
        .pkBox:hover >img:nth-of-type(1){
            transform: rotate(60deg);
        }
        .pkBox:hover >img:nth-of-type(2){
            transform: rotate(120deg);
        }
        .pkBox:hover >img:nth-of-type(3){
            transform: rotate(180deg);
        }
        .pkBox:hover >img:nth-of-type(4){
            transform: rotate(240deg);
        }
        .pkBox:hover >img:nth-of-type(5){
            transform: rotate(300deg);
        }
        .pkBox:hover >img:nth-of-type(6){
            transform: rotate(360deg);
        }

    </style>