前端学习日记：css3的transition-tranform(-origin)实现扑克牌扇形展开效果

拼搏现实的明天。 2023-06-06 12:27 3阅读 0赞

margin:100px auto;  
            position: relative;  
              
        \}

.box img\{  
        position: absolute;  
        left:0;  
        top:0;  
        transition:all 1s;

/\* 设置变换中心\*/  
        transform-origin: center bottom;  
        box-shadow: 2px 2px 3px 0px \#333;

.box:hover img:nth-child(6)\{  
            transform:rotate(-10deg);  
        \}

.box:hover img:nth-child(5)\{  
            transform:rotate(-20deg);  
        \}

.box:hover img:nth-child(4)\{  
            transform:rotate(-30deg);  
        \}  
        .box:hover img:nth-child(3)\{  
            transform:rotate(-40deg);  
        \}  
        .box:hover img:nth-child(2)\{  
            transform:rotate(-50deg);  
        \}  
        .box:hover img:nth-child(1)\{  
            transform:rotate(-60deg);  
        \}

.box:hover img:nth-child(8)\{  
            transform:rotate(10deg);  
        \}

.box:hover img:nth-child(9)\{  
            transform:rotate(20deg);  
        \}

.box:hover img:nth-child(10)\{  
            transform:rotate(30deg);  
        \}  
        .box:hover img:nth-child(11)\{  
            transform:rotate(40deg);  
        \}  
        .box:hover img:nth-child(12)\{  
            transform:rotate(50deg);  
        \}  
        .box:hover img:nth-child(13)\{  
            transform:rotate(60deg);  
        \}

</style>  
</head>  
<body>  
    <div class="box">  
        <img  src="images/pk2.png" alt=""/>  
        <img  src="images/pk2.png" alt=""/>  
        <img  src="images/pk2.png" alt=""/>  
        <img  src="images/pk2.png" alt=""/>  
        <img  src="images/pk2.png" alt=""/>  
        <img  src="images/pk2.png" alt=""/>  
        <img  src="images/pk2.png" alt=""/>  
        <img  src="images/pk2.png" alt=""/>  
        <img  src="images/pk2.png" alt=""/>  
        <img  src="images/pk2.png" alt=""/>  
        <img  src="images/pk2.png" alt=""/>  
        <img  src="images/pk2.png" alt=""/>  
        <img  src="images/pk2.png" alt=""/>  
    </div>  
</body>