カードを散らかすCSS

https://gyazo.com/2b8d7bf915bb6a78f6f549053a2b1f12

なんか散らかしてーと思ったらChatGPTが作ってくれた

ランダムネスをCSSだけで作りたいな〜

適用順注意

検索結果の散らかり方のほうが激しくて笑う

https://gyazo.com/e50929bb89b0e52ca1a543b635ccb672

code:style.css

.container {

perspective: 1000px; /* Adds some depth */

}

.page-list-item {

transition: transform 0.3s ease-out;

display: inline-block;

/* Initial position and rotation */

transform: rotate(0deg) translate(0, 0);

}

.page-list-item:nth-child(odd) {

transform: rotate(-3deg) translate(-5px, 5px);

}

.page-list-item:nth-child(even) {

transform: rotate(3deg) translate(5px, -5px);

}

.page-list-item:nth-child(3n) {

transform: rotate(-6deg) translate(-10px, 10px);

}

.page-list-item:nth-child(4n) {

transform: rotate(6deg) translate(10px, -10px);

}

/* Hover effect to lift the card */

.page-list-item:hover {

transform: scale(1.05) rotate(0deg);

z-index: 2; /* Ensure hovered item is above others */

}