CSS3 SVG 转动的3D铅笔

css svg rotating pencil

css, pen, rotate

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

/***********MEASURES***********/
/***********COLORS***********/
/***********STYLES***********/

body {
    background: -webkit-linear-gradient(rgba(0, 40, 210, 0.77) 0%, #354ce2 100%);
    background: linear-gradient(rgba(0, 40, 210, 0.77) 0%, #354ce2 100%);
    box-sizing: border-box;
    position: relative;
}
.pencil {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translateY(400px) rotateY(0deg) rotateX(0deg) rotateZ(165deg);
    transform: translateY(400px) rotateY(0deg) rotateX(0deg) rotateZ(165deg);
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-animation: rotate-pencil 5s linear infinite;
    animation: rotate-pencil 5s linear infinite;
}
div[class^='pencil-body-side'] {
    position: absolute;
    width: 20px;
    height: 382.4px;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
div[class^='pencil-body-side']:before {
    content: '';
    position: absolute;
    border-bottom: 80px solid #d3af6b;
    border-left: 10.6px solid transparent;
    border-right: 10.6px solid transparent;
    -webkit-transform: translateZ(9px) rotateX(-13deg);
    transform: translateZ(9px) rotateX(-13deg);
    top: -78.8px;
}
div[class^='pencil-body-side']:after {
    content: '';
    position: absolute;
    border-bottom: 10px solid black;
    border-left: 2px solid transparent;
    border-right: 2px solid transparent;
    -webkit-transform: translateZ(17px) translateX(8px) rotateX(-13deg);
    transform: translateZ(17px) translateX(8px) rotateX(-13deg);
    top: -78.8px;
}
.pencil-body-side-1 {
    background-color: #efc90e;
    -webkit-transform: translateZ(-18px);
    transform: translateZ(-18px);
}
.pencil-body-side-2 {
    background-color: black;
    -webkit-transform: translateZ(18px) rotateY(180deg);
    transform: translateZ(18px) rotateY(180deg);
}
.pencil-body-side-3 {
    background-color: #efc90e;
    -webkit-transform: translateZ(8.8px) translateX(15px) rotateY(240deg);
    transform: translateZ(8.8px) translateX(15px) rotateY(240deg);
}
.pencil-body-side-4 {
    background-color: black;
    -webkit-transform: translateZ(-8.8px) translateX(-15px) rotateY(60deg);
    transform: translateZ(-8.8px) translateX(-15px) rotateY(60deg);
}
.pencil-body-side-5 {
    background-color: #efc90e;
    -webkit-transform: translateZ(8.8px) translateX(-15px) rotateY(-240deg);
    transform: translateZ(8.8px) translateX(-15px) rotateY(-240deg);
}
.pencil-body-side-6 {
    background-color: black;
    -webkit-transform: translateZ(-8.8px) translateX(15px) rotateY(-60deg);
    transform: translateZ(-8.8px) translateX(15px) rotateY(-60deg);
}
.pencil-top {
    position: absolute;
    width: 20px;
    height: 36px;
    top: 373px;
    -webkit-transform: rotateX(90deg) translateZ(9px);
    transform: rotateX(90deg) translateZ(9px);
    background-color: #d3af6b;
}
.pencil-top:after,
.pencil-top:before {
    content: '';
    position: absolute;
    width: 20px;
    height: 36px;
    background-color: #d3af6b;
}
.pencil-top:before {
    -webkit-transform: translateZ(18px) rotateZ(60deg);
    transform: translateZ(18px) rotateZ(60deg);
}
.pencil-top:after {
    -webkit-transform: translateZ(18px) rotateZ(120deg);
    transform: translateZ(18px) rotateZ(120deg);
}
.pencil-lead {
    background-color: black;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    position: absolute;
    z-index: 1;
    top: 25%;
}
.logo {
    position: absolute;
    -webkit-transform: translateX(-42%) translateY(20px) translateZ(-2px) rotateY(180deg) rotateZ(90deg);
    transform: translateX(-42%) translateY(20px) translateZ(-2px) rotateY(180deg) rotateZ(90deg);
    width: 600%;
}
.logo-fill {
    fill: #efc90e;
}
.paper {
    position: absolute;
    left: 50%;
    top: 50%;
    height: 100px;
    width: 80px;
    background-color: white;
    -webkit-transform: translateX(-53%) translateY(24px) rotateX(83deg) rotateY(4deg);
    transform: translateX(-53%) translateY(24px) rotateX(83deg) rotateY(4deg);
}
.paper:after {
    content: '';
    position: absolute;
    height: 80px;
    width: 50px;
    border: 6px solid black;
    border-radius: 50%;
    left: 50%;
    top: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}
@-webkit-keyframes rotate-pencil {
    0% {
        -webkit-transform: translateY(400px) rotateY(0deg) rotateX(0deg) rotateZ(165deg);
        transform: translateY(400px) rotateY(0deg) rotateX(0deg) rotateZ(165deg);
    }
    50% {
        -webkit-transform: translateY(400px) rotateY(-180deg) rotateX(0deg) rotateZ(165deg);
        transform: translateY(400px) rotateY(-180deg) rotateX(0deg) rotateZ(165deg);
    }
    100% {
        -webkit-transform: translateY(400px) rotateY(-359deg) rotateX(0deg) rotateZ(165deg);
        transform: translateY(400px) rotateY(-359deg) rotateX(0deg) rotateZ(165deg);
    }
}
@keyframes rotate-pencil {
    0% {
        -webkit-transform: translateY(400px) rotateY(0deg) rotateX(0deg) rotateZ(165deg);
        transform: translateY(400px) rotateY(0deg) rotateX(0deg) rotateZ(165deg);
    }
    50% {
        -webkit-transform: translateY(400px) rotateY(-180deg) rotateX(0deg) rotateZ(165deg);
        transform: translateY(400px) rotateY(-180deg) rotateX(0deg) rotateZ(165deg);
    }
    100% {
        -webkit-transform: translateY(400px) rotateY(-359deg) rotateX(0deg) rotateZ(165deg);
        transform: translateY(400px) rotateY(-359deg) rotateX(0deg) rotateZ(165deg);
    }
}

HTML

css svg rotating pencil

css, pen, rotate

编辑器支持Emmet

快捷键

css svg rotating pencil

css, pen, rotate

分别使用SVG path和CSS3 motion-path实现的粒子漂浮动画

HTML5 CSS3+SVG直尺、铅笔和橡皮

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：