CSS3 旋转的3D金字塔

CSS Only Rotating 3d Pyramid

CSS3

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

.container {
    width: 400px;
    height: 400px;
    margin: 0 auto;
    position: relative;
    perspective: 300px;
    perspective-origin: 50% 40%;
}
.side {
    position: absolute;
    left: 140px;
    top: 150px;
    width: 0;
    height: 0;
    border-left: 60px solid transparent;
    border-right: 60px solid transparent;
    border-bottom: 120px solid #ccc;
    transform-origin: 50% 0%;
    animation: spin 5s infinite linear;
}
.back {
    animation-delay: -2.5s;
}
.right {
    animation-delay: -1.25s;
}
.left {
    animation-delay: -3.75s;
}
@keyframes spin {
    0% {
        transform: rotateY(0deg) rotateX(30deg);
        border-bottom-color: #1abcff;
    }
    25% {
        transform: rotateY(90deg) rotateX(30deg);
        border-bottom-color: #00a2e6;
        opacity: 1;
    }
    25.1% {
        opacity: 0;
    }
    50% {
        transform: rotateY(180deg) rotateX(30deg);
        border-bottom-color: #0089c2;
    }
    74.9% {
        opacity: 0;
    }
    75% {
        transform: rotateY(270deg) rotateX(30deg);
        border-bottom-color: #007eb3;
        opacity: 1;
    }
    100% {
        transform: rotateY(360deg) rotateX(30deg);
        border-bottom-color: #1abcff;
    }
}
.shadow {
    position: absolute;
    top: 300px;
    left: 175px;
    width: 50px;
    height: 50px;
    background-color: #bbb;
    box-shadow: 0 0 40px 40px #bbb;
    animation: shadow 5s infinite linear;
}
@keyframes shadow {
    0% {
        transform: rotateX(90deg) rotateZ(0deg);
    }
    100% {
        transform: rotateX(90deg) rotateZ(-360deg);
    }
}

HTML

CSS Only Rotating 3d Pyramid

CSS3

编辑器支持Emmet

快捷键

CSS Only Rotating 3d Pyramid

CSS3

CSS3 透明旋转的金字塔

CSS3 3D旋转卡片和空中漂浮的文字

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：