css3 2d变换 属性： transform：向元素应用 2D 或 3D 转换 transform: rotateX() rotateY() rotateZ() transform-origin：允许你改变被转换元素的位置 (three-value syntax)
transform-style：规定被嵌套元素如何在 3D 空间中显示
perspective：规定 3D 元素的透视效果
perspective-origin：规定 3D 元素的底部位置
backface-visibility：定义元素在不面对屏幕时是否可见
注意：如果不加3d效果 则会默认呈现出2d效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body{ background-color: black; } .cointer{ width: 300px; height: 450px; /* border: solid 2px red; */ position: relative; margin: 200px auto; /* background-color: black; */ } .cointer img{ width: 300px; height: 450px; position: absolute; transform-origin: bottom center; transition: all 1.5s; box-shadow: 0 0 2px ; /* left: ; */ } .cointer:hover img:nth-child(1){ transform: rotate(-60deg); } .cointer:hover img:nth-child(2){ transform: rotate(-50deg); } .cointer:hover img:nth-child(3){ transform: rotate(-40deg); } .cointer:hover img:nth-child(4){ transform: rotate(-30deg); } .cointer:hover img:nth-child(5){ transform: rotate(-20deg); } .cointer:hover img:nth-child(6){ transform: rotate(-10deg); } /* 右边扑克牌距离 */ .cointer:hover img:nth-child(8){ transform: rotate(10deg); } .cointer:hover img:nth-child(9){ transform: rotate(20deg); } .cointer:hover img:nth-child(10){ transform: rotate(30deg); } .cointer:hover img:nth-child(11){ transform: rotate(40deg); } .cointer:hover img:nth-child(12){ transform: rotate(50deg); } .cointer:hover img:nth-child(13){ transform: rotate(60deg); } </style> </head> <body> <div class="cointer"> <img src="imgs/pk1.png" alt=""> <img src="imgs/pk1.png" alt=""> <img src="imgs/pk1.png" alt=""> <img src="imgs/pk1.png" alt=""> <img src="imgs/pk1.png" alt=""> <img src="imgs/pk1.png" alt=""> <img src="imgs/pk1.png" alt=""> <img src="imgs/pk1.png" alt=""> <img src="imgs/pk1.png" alt=""> <img src="imgs/pk1.png" alt=""> <img src="imgs/pk1.png" alt=""> <img src="imgs/pk1.png" alt=""> <img src="imgs/pk1.png" alt=""> </div> </body> </html>