纯CSS构建三维版本的金刚（人猿泰山）透明模型

Kong 3D modeling in css

css3, 3d模型

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

:root {
    --mouse-x: 0deg;
    --mouse-y: 0deg;
}
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: radial-gradient(circle at center, rgba(43, 150, 242, 0.5), transparent 75%), radial-gradient(circle at center, rgba(6, 224, 187, 0.5), transparent 50%), #011429;
    background-size: 200% 200%, 200% 200%, 200% 100%;
    background-position: -125vw -25vw, 50vw -25%, 50% 50%;
    background-repeat: no-repeat;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
body:hover #wrap {
    -webkit-animation: none;
    animation: none;
}
body * {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
body #wrap {
    width: 500px;
    height: 500px;
    position: relative;
    -webkit-animation: spin 5s linear infinite;
    animation: spin 5s linear infinite;
    transition: all 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
    -webkit-transform: rotateX(var(--mouse-y)) rotateY(var(--mouse-x));
    transform: rotateX(var(--mouse-y)) rotateY(var(--mouse-x));
}
@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotateX(0deg) rotateY(0deg);
        transform: rotateX(0deg) rotateY(0deg);
    }
    50% {
        -webkit-transform: rotateX(-10deg) rotateY(180deg);
        transform: rotateX(-10deg) rotateY(180deg);
    }
    100% {
        -webkit-transform: rotateX(0deg) rotateY(360deg);
        transform: rotateX(0deg) rotateY(360deg);
    }
}
@keyframes spin {
    0% {
        -webkit-transform: rotateX(0deg) rotateY(0deg);
        transform: rotateX(0deg) rotateY(0deg);
    }
    50% {
        -webkit-transform: rotateX(-10deg) rotateY(180deg);
        transform: rotateX(-10deg) rotateY(180deg);
    }
    100% {
        -webkit-transform: rotateX(0deg) rotateY(360deg);
        transform: rotateX(0deg) rotateY(360deg);
    }
}
body #wrap .head,
body #wrap .leg1,
body #wrap .leg2,
body #wrap .arms1 {
    width: 100%;
    height: 100%;
    position: absolute;
}
body #wrap .head .face,
body #wrap .leg1 .face,
body #wrap .leg2 .face,
body #wrap .arms1 .face {
    box-shadow: 0 0 20px 10px rgba(43, 150, 242, 0.25);
}
body #wrap .head:before,
body #wrap .head:after,
body #wrap .leg1:before,
body #wrap .leg1:after,
body #wrap .leg2:before,
body #wrap .leg2:after,
body #wrap .arms1:before,
body #wrap .arms1:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(43, 150, 242, 0.5), rgba(6, 224, 187, 0.5));
    top: 0;
    left: 0;
    -webkit-clip-path: polygon(0% 73%, 14% 55%, 19% 56%, 33% 44%, 51% 66%, 46% 74%, 30% 74%, 15% 93%, 0% 94%);
    clip-path: polygon(0% 73%, 14% 55%, 19% 56%, 33% 44%, 51% 66%, 46% 74%, 30% 74%, 15% 93%, 0% 94%);
    -webkit-transform: translateZ(-75px);
    transform: translateZ(-75px);
}
body #wrap .head:after,
body #wrap .leg1:after,
body #wrap .leg2:after,
body #wrap .arms1:after {
    -webkit-transform: translateZ(75px);
    transform: translateZ(75px);
}
body #wrap .leg1 .face {
    background: linear-gradient(to bottom, rgba(43, 150, 242, 0.5), rgba(6, 224, 187, 0.5));
    position: absolute;
}
body #wrap .leg1 .face:first-of-type {
    width: 144.5px;
    height: 107.5px;
    -webkit-transform-origin: bottom;
    transform-origin: bottom;
    -webkit-transform: rotateY(90deg) rotateX(1deg) translateZ(-70px);
    transform: rotateY(90deg) rotateX(1deg) translateZ(-70px);
    bottom: 32px;
}
body #wrap .leg1 .face:nth-of-type(2) {
    width: 144.5px;
    height: 110px;
    -webkit-transform-origin: bottom;
    transform-origin: bottom;
    -webkit-transform: rotateY(90deg) rotateX(-38deg) translateZ(-87px);
    transform: rotateY(90deg) rotateX(-38deg) translateZ(-87px);
    bottom: 84px;
}
body #wrap .leg1 .face:nth-of-type(3) {
    width: 145px;
    height: 90px;
    -webkit-transform-origin: bottom;
    transform-origin: bottom;
    -webkit-transform: rotateY(90deg) rotateX(-48.5deg) translateZ(35px);
    transform: rotateY(90deg) rotateX(-48.5deg) translateZ(35px);
    bottom: 244px;
}
body #wrap .arms1 .face {
    background: linear-gradient(to bottom, rgba(43, 150, 242, 0.5), rgba(6, 224, 187, 0.5));
    position: absolute;
}
body #wrap .arms1 .face:first-of-type {
    -webkit-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
    width: 65px;
    height: 335px;
    right: -36px;
    top: 55px;
    -webkit-transform: translateZ(-36px) rotateY(90deg) rotateX(38.95deg);
    transform: translateZ(-36px) rotateY(90deg) rotateX(38.95deg);
}
body #wrap .arms1 .face:nth-of-type(2) {
    -webkit-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
    width: 65px;
    height: 335px;
    right: -36px;
    top: 55px;
    -webkit-transform: translateZ(101px) rotateY(90deg) rotateX(38.95deg);
    transform: translateZ(101px) rotateY(90deg) rotateX(38.95deg);
}
body #wrap .arms1 .face:nth-of-type(3) {
    -webkit-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
    width: 65px;
    height: 80.5px;
    right: -20px;
    bottom: 31px;
    -webkit-transform: translateZ(101px) rotateY(90deg) rotateX(-10deg);
    transform: translateZ(101px) rotateY(90deg) rotateX(-10deg);
}
body #wrap .arms1 .face:nth-of-type(4) {
    -webkit-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
    width: 65px;
    height: 80.5px;
    right: -20px;
    bottom: 31px;
    -webkit-transform: translateZ(-36px) rotateY(90deg) rotateX(-10deg);
    transform: translateZ(-36px) rotateY(90deg) rotateX(-10deg);
}
body #wrap .arms1 .face:nth-of-type(5),
body #wrap .arms1 .face:nth-of-type(6) {
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(43, 150, 242, 0.5), rgba(6, 224, 187, 0.5));
    -webkit-clip-path: polygon(44% 26%, 52% 26%, 94% 78%, 91% 94%, 73% 94%, 74% 90%, 35% 41%);
    clip-path: polygon(44% 26%, 52% 26%, 94% 78%, 91% 94%, 73% 94%, 74% 90%, 35% 41%);
    -webkit-transform: translateZ(-37px);
    transform: translateZ(-37px);
}
body #wrap .arms1 .face:nth-of-type(6) {
    -webkit-transform: translateZ(37px);
    transform: translateZ(37px);
}
body #wrap .arms1 .face:nth-of-type(7) {
    -webkit-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
    width: 55px;
    height: 175px;
    right: 80px;
    top: 90px;
    -webkit-transform: translateZ(30px) rotateY(90deg) rotateX(38.95deg);
    transform: translateZ(30px) rotateY(90deg) rotateX(38.95deg);
}
body #wrap .arms1 .face:nth-of-type(8) {
    -webkit-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
    width: 55px;
    height: 100px;
    right: 131px;
    top: 251.25px;
    -webkit-transform: translateZ(30px) rotateY(90deg) rotateX(-30deg);
    transform: translateZ(30px) rotateY(90deg) rotateX(-30deg);
}
body #wrap .arms1 .face:nth-of-type(9) {
    -webkit-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
    width: 60px;
    height: 40px;
    right: 221px;
    top: 91px;
    -webkit-transform: translateZ(99px) rotateY(90deg) rotateX(-90deg);
    transform: translateZ(99px) rotateY(90deg) rotateX(-90deg);
}
body #wrap .arms1 .face:nth-of-type(10) {
    -webkit-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
    width: 60px;
    height: 40px;
    right: 221px;
    top: 91px;
    -webkit-transform: translateZ(-39px) rotateY(90deg) rotateX(-90deg);
    transform: translateZ(-39px) rotateY(90deg) rotateX(-90deg);
}
body #wrap .arms1:before,
body #wrap .arms1:after {
    -webkit-clip-path: polygon(44% 26%, 52% 26%, 94% 78%, 91% 94%, 73% 94%, 74% 90%, 35% 41%);
    clip-path: polygon(44% 26%, 52% 26%, 94% 78%, 91% 94%, 73% 94%, 74% 90%, 35% 41%);
    -webkit-transform: translateZ(-100px);
    transform: translateZ(-100px);
}
body #wrap .arms1:after {
    -webkit-transform: translateZ(100px);
    transform: translateZ(100px);
}
body #wrap .head .face {
    background: linear-gradient(to bottom, rgba(43, 150, 242, 0.5), rgba(6, 224, 187, 0.5));
    position: absolute;
}
body #wrap .head .face:first-of-type {
    width: 80px;
    height: 125px;
    top: -20px;
    right: 25px;
    -webkit-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
    -webkit-transform: translateZ(40px) rotateY(90deg) rotateX(50deg);
    transform: translateZ(40px) rotateY(90deg) rotateX(50deg);
}
body #wrap .head .face:nth-of-type(2) {
    width: 80px;
    height: 21px;
    top: 101.5px;
    right: 36px;
    -webkit-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
    -webkit-transform: translateZ(40px) rotateY(90deg) rotateX(-30deg);
    transform: translateZ(40px) rotateY(90deg) rotateX(-30deg);
}
body #wrap .head .face:nth-of-type(3) {
    width: 80px;
    height: 28px;
    top: 119px;
    right: 20px;
    -webkit-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
    -webkit-transform: translateZ(40px) rotateY(90deg) rotateX(30deg);
    transform: translateZ(40px) rotateY(90deg) rotateX(30deg);
}
body #wrap .head .face:nth-of-type(4) {
    width: 80px;
    height: 24px;
    top: 147px;
    right: 20px;
    -webkit-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
    -webkit-transform: translateZ(40px) rotateY(90deg) rotateX(0deg);
    transform: translateZ(40px) rotateY(90deg) rotateX(0deg);
}
body #wrap .head .face:nth-of-type(5) {
    width: 80px;
    height: 60px;
    top: 149px;
    right: 68px;
    -webkit-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
    -webkit-transform: translateZ(40px) rotateY(90deg) rotateX(-51deg);
    transform: translateZ(40px) rotateY(90deg) rotateX(-51deg);
}
body #wrap .head .face:nth-of-type(6) {
    width: 80px;
    height: 125px;
    top: 83px;
    right: 72px;
    -webkit-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
    -webkit-transform: translateZ(40px) rotateY(90deg) rotateX(38.5deg);
    transform: translateZ(40px) rotateY(90deg) rotateX(38.5deg);
}
body #wrap .head:before,
body #wrap .head:after {
    -webkit-clip-path: polygon(60% 5%, 79% 21%, 77% 24%, 80% 29%, 80% 34%, 70% 42%, 54% 22%, 45% 22%, 49% 14%);
    clip-path: polygon(60% 5%, 79% 21%, 77% 24%, 80% 29%, 80% 34%, 70% 42%, 54% 22%, 45% 22%, 49% 14%);
    -webkit-transform: translateZ(-40px);
    transform: translateZ(-40px);
}
body #wrap .head:after {
    -webkit-transform: translateZ(40px);
    transform: translateZ(40px);
}
body #wrap .leg2:before,
body #wrap .leg2:after {
    -webkit-clip-path: polygon(31% 76%, 29% 80%, 34% 88%, 34% 92%, 56% 92%, 57% 89%, 48% 76%);
    clip-path: polygon(31% 76%, 28% 80%, 34% 88%, 34% 92%, 56% 92%, 57% 89%, 48% 76%);
}
body #wrap .leg2:after {
    -webkit-transform: translateZ(0px);
    transform: translateZ(0px);
}

HTML

Kong 3D modeling in css

css3, 3d模型

编辑器支持Emmet

快捷键

Kong 3D modeling in css

css3, 3d模型

纯CSS构建的三维螺旋文本动画

使用CSS3构建三角形（对角线线型）媒体区块（图文块）

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：