请马上登录，朋友们都在花潮里等着你哦：）
您需要 登录 才可以下载或查看，没有账号？立即注册
x
<style>
#papa {
margin: 20px auto;
width: 1024px;
height: 640px;
border: 1px solid gray;
perspective: 800px;
display: grid;
place-items: center;
position: relative;
}
#papa div {
display: inherit;
place-items: inherit;
}
#box {
position: absolute;
width: 150px;
height: 150px;
transform-style: preserve-3d;
transform: rotateX(-45deg) rotateY(45deg) rotateZ(0);
animation: rot linear 16s infinite;
--xx: 75px;
}
#front { transform: translateZ(var(--xx)); --bg: red; }
#back { transform: rotateY(180deg) translateZ(var(--xx)); --bg: purple; }
#left { transform: rotateY(-90deg) translateZ(var(--xx)); --bg: orange; }
#right { transform: rotateY(90deg) translateZ(var(--xx)); --bg: green; }
#top { transform: rotateX(90deg) translateZ(var(--xx)); --bg: cyan; }
#bottom { transform: rotateX(-90deg) translateZ(var(--xx)); --bg: blue; }
.board {
position: absolute;
width: 100%;
height: 100%;
background: var(--bg);
opacity: 0.5;
}
.board::before, .board::after {
position: absolute;
content: '';
width: 100%;
height: 100%;
background: linear-gradient(45deg, snow, yellow, snow) no-repeat center/4px 100%;
}
.board::after {
transform: rotate(90deg);
}
@keyframes rot {
to {
transform: rotateX(315deg) rotateY(405deg) rotateZ(360deg);
}
}
</style>
<div id="papa">
<div id="box">
<div id="front" class="board"></div>
<div id="back" class="board"></div>
<div id="left" class="board"></div>
<div id="right" class="board"></div>
<div id="top" class="board"></div>
<div id="bottom" class="board"></div>
</div>
</div>
| 
发表于 2025-7-8 19:43
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
楼主
发表于 2025-7-8 20:02
