純css實現3D字型

標籤：translate   rgb   技術分享   line   span   tran   set   space   innertext   

下面分別是html，css和js代碼：

<div class="wrapper">    <h1 contenteditable data-heading="Folded">Folded</h1></div>

$bg: #e6e2df;html, body {    height: 100%;}body {    background: linear-gradient(45deg, $bg 80%,#c2c1bd 100%);    -webkit-font-smoothing: antialiased;    -moz-osx-font-smoothing: grayscale;}.wrapper {    width: 100%;    font-family: ‘Source Code Pro‘, monospace;    margin: 0 auto;    height: 100%;        h1 {        text-transform: uppercase;        transform: translate(-50%, -50%) skew(10deg) rotate(-10deg);        font-size: 20vw;        top: 50%;        left: 50%;        margin: 0;        position: absolute;        text-rendering: optimizeLegibility;        font-weight: 900;        color: rgba(#ff9eb1, 0.5);        text-shadow: 1px 4px 6px $bg, 0 0 0 #66303a, 1px 4px 6px $bg;        white-space: nowrap;                &:before {            content: attr(data-heading);            position: absolute;            left: 0;            top: -4.8%;            overflow: hidden;            width: 100%;            height: 50%;            color: #fbf7f4;            transform: translate(1.6vw, 0) skew(-13deg) scale(1, 1.2);            z-index: 2;            text-shadow: 2px -1px 6px rgba(0,0,0,0.2);        }                &:after {            content: attr(data-heading);            position: absolute;            left: 0;            top: 0;            overflow: hidden;            width: 100%;            height: 100%;            z-index: 1;            color: #d3cfcc;            transform: translate(0vw, 0) skew(13deg) scale(1, 0.8);            clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0% 100%);            text-shadow: 2px -1px 6px rgba(0,0,0,0.3);        }    }}

// JS for content editable trick from Chris Coyiervar h1 = document.querySelector("h1");h1.addEventListener("input", function() {  this.setAttribute("data-heading", this.innerText);});

純css實現3D字型