纯CSS制作的3D四面体（棱镜）分解动画

tetrahedron decomposition with pure CSS 3D, WebKit-only

css3, diamond

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2618
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

html {
    overflow: hidden;
    background: #0b3954;
}
div {
    position: absolute;
}
[class*='3d'] {
    transform-style: preserve-3d;
}
.a3d {
    top: 50%;
    left: 50%;
    transform: rotatex(90deg);
}
.pos3d {
    --h: -1;
    --v: 0;
    transform: translate3d(calc(var(--v)*var(--h)*12.5vmin), calc((2*var(--v) - 1)*8.83883vmin), calc((1 - var(--v))*var(--h)*12.5vmin));
    animation: d 5s ease-in infinite alternate;
}
.pos3d:nth-child(2n) {
    --h: 1;
}
.pos3d:nth-child(n + 3) {
    --v: 1;
}
@keyframes d {
    to {
        transform: translate3d(calc(var(--v)*var(--h)*25vmin), calc((2*var(--v) - 1)*17.67767vmin), calc((1 - var(--v))*var(--h)*25vmin));
    }
}
.s3d {
    animation: r 10s ease-in-out infinite, c 5s ease-out infinite alternate;
}
.s3d--8hedron {
    --rx: 35.26439deg;
    --z: 10.20621vmin;
    color: #e0fe4f;
}
.s3d--8hedron .s2d:nth-child(n + 5) {
    --i: 1;
}
.s3d--4hedron {
    --rx: -35.26439deg;
    --z: 5.1031vmin;
    color: #ed6362;
}
.s3d--4hedron .s2d:nth-child(2n) {
    --i: 1;
}
@keyframes r {
    0%, 10% {
        transform: rotatex(0deg) rotatey(0deg);
    }
    90%,
    100% {
        transform: rotatex(1turn) rotatey(1turn);
    }
}
@keyframes c {
    0%, 10% {
        color: white;
    }
}
.s2d {
    margin: -14.43376vmin;
    width: 28.86751vmin;
    height: 28.86751vmin;
    transform: rotatey(calc(var(--j, 0)*90deg)) rotatex(calc(var(--rx) + var(--i, 0)*.5turn)) translatez(var(--z));
    background: currentcolor;
    clip-path: polygon(calc(50% + 0%) calc(50% + -50%), calc(50% + 43.30127%) calc(50% + 25%), calc(50% + -43.30127%) calc(50% + 25%), calc(50% + 0%) calc(50% + -50%), calc(50% + 0%) calc(50% + -47.5%), calc(50% + -41.13621%) calc(50% + 23.75%), calc(50% + 41.13621%) calc(50% + 23.75%), calc(50% + 0%) calc(50% + -47.5%));
}
.s2d:nth-child(4n + 2) {
    --j: 1;
}
.s2d:nth-child(4n + 3) {
    --j: 2;
}
.s2d:nth-child(4n + 4) {
    --j: 3;
}

HTML

tetrahedron decomposition with pure CSS 3D, WebKit-only

css3, diamond

编辑器支持Emmet

快捷键

tetrahedron decomposition with pure CSS 3D, WebKit-only

css3, diamond

纯CSS 3D立体魔方分解旋转组合动画

纯CSS实现的3D球体穿过平面空洞动画效果

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：