知识点：
- @keyframes
- perspective
- animation
- transform-origin
以上详见mdn
看到的是别人的，自己写一遍是变成自己的开始
废话不多说，直接上代码
<!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>
.card {
width: 124.5px;
height: 213px;
position: fixed;
left: calc(50% - 50px);
top: calc(50% - 150px);
transform: rotateX(45deg) rotateY(180deg) rotateZ(-90deg) translateY(300px);
animation: rotate linear 3s forwards;
transform-origin: center center -100px;
cursor: pointer;
background: url("./images/牌底.png") no-repeat 0 0 / cover;
}
@keyframes rotate {
0% {
transform: rotateX(45deg) rotateY(180deg) rotateZ(-90deg) translateY(400px) translateZ(-300px);
}
100% {
transform: rotateX(45deg) rotateY(180deg) rotateZ(var(--rotateZ)) translateY(400px) translateZ(-300px);
}
}
.container {
width: 100vw;
height: 100vh;
position: fixed;
perspective: 1000px;
}
</style>
</head>
<body>
<script>
const cards = []
let i = 0;
let prevTime = 0;
const container = document.createElement("div")
container.classList.add("container")
for (let i = 0; i < 100; i++) {
const card = document.createElement("div")
card.classList.add("card")
card.style.setProperty("--rotateZ", i * 1.8 - 90 + "deg")
container.appendChild(card)
}
document.body.appendChild(container)
</script>
</body>
</html>
1174
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
