html中字体设置3d效果,CSS3 3D效果的文字

CSS

语言：

CSSSCSS

确定

@import "https://fonts.googleapis.com/css?family=Satisfy";

.centralize {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-pack: center;

-webkit-justify-content: center;

-ms-flex-pack: center;

justify-content: center;

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

height: 100vh;

font-family: 'Satisfy', cursive;

}

h2 {

-webkit-transform: rotate(15deg);

transform: rotate(15deg);

font-size: 30px;

color: #EEE;

margin-top: -40px;

}

h1 {

white-space: nowrap;

font-size: 100px;

color: #FFF;

-webkit-transform: perspective(0px) rotateX(45deg);

transform: perspective(0px) rotateX(45deg);

will-change: transform;

-webkit-transition-timing-function: cubic-bezier(0.88, 2.85, 0.46, -0.12);

transition-timing-function: cubic-bezier(0.88, 2.85, 0.46, -0.12);

-webkit-transition-duration: .2s;

transition-duration: .2s;

text-shadow: 0px 1px 0 #e6e6e6, 0px 2px 0 #e6e6e6, 0px 3px 0 #e6e6e6, 0px 4px 0 #e6e6e6, 0px 5px 0 #e6e6e6, 0px 6px 0 #e6e6e6, 0px 7px 0 #e6e6e6, 0px 6px 0 #0DF, 0px 7px 0 #0DF, 0px 8px 0 #0DF, 0px 9px 0 #0DF, 0px 10px 0 #0DF, 0px 11px 0 #0DF, 0px 12px 0 #0DF, 2px 6px 0 #0DF, 2px 7px 0 #0DF, 2px 8px 0 #0DF, 2px 9px 0 #0DF, 2px 10px 0 #0DF, 2px 11px 0 #0DF, 2px 12px 0 #0DF, -2px 6px 0 #0DF, -2px 7px 0 #0DF, -2px 8px 0 #0DF, -2px 9px 0 #0DF, -2px 10px 0 #0DF, -2px 11px 0 #0DF, -2px 12px 0 #0DF, 0px 13px 0 #00b1cc, 0px 14px 0 #00b1cc, 0px 15px 0 #00b1cc, 0px 16px 0 #00b1cc, 0px 17px 0 #00b1cc, 0px 18px 0 #00b1cc, 0px 19px 0 #00b1cc, 4px 11px 0 #00b1cc, 4px 12px 0 #00b1cc, 4px 13px 0 #00b1cc, 4px 14px 0 #00b1cc, 4px 15px 0 #00b1cc, 4px 16px 0 #00b1cc, 4px 17px 0 #00b1cc, -4px 11px 0 #00b1cc, -4px 12px 0 #00b1cc, -4px 13px 0 #00b1cc, -4px 14px 0 #00b1cc, -4px 15px 0 #00b1cc, -4px 16px 0 #00b1cc, -4px 17px 0 #00b1cc, 3px 7px 0 #00b1cc, 4px 8px 0 #00b1cc, -4px 9px 0 #00b1cc, 0 21px 15px #000;

}

h1:hover {

cursor: default;

-webkit-transition-duration: .5s;

transition-duration: .5s;

-webkit-transform: perspective(0px) rotateX(45deg) translateY(-20px);

transform: perspective(0px) rotateX(45deg) translateY(-20px);

text-shadow: 0px 1px 0 #e6e6e6, 0px 2px 0 #e6e6e6, 0px 3px 0 #e6e6e6, 0px 4px 0 #e6e6e6, 0px 5px 0 #e6e6e6, 0px 6px 0 #e6e6e6, 0px 7px 0 #e6e6e6, 0px 6px 0 #0DF, 0px 7px 0 #0DF, 0px 8px 0 #0DF, 0px 9px 0 #0DF, 0px 10px 0 #0DF, 0px 11px 0 #0DF, 0px 12px 0 #0DF, 2px 6px 0 #0DF, 2px 7px 0 #0DF, 2px 8px 0 #0DF, 2px 9px 0 #0DF, 2px 10px 0 #0DF, 2px 11px 0 #0DF, 2px 12px 0 #0DF, -2px 6px 0 #0DF, -2px 7px 0 #0DF, -2px 8px 0 #0DF, -2px 9px 0 #0DF, -2px 10px 0 #0DF, -2px 11px 0 #0DF, -2px 12px 0 #0DF, 0px 13px 0 #00b1cc, 0px 14px 0 #00b1cc, 0px 15px 0 #00b1cc, 0px 16px 0 #00b1cc, 0px 17px 0 #00b1cc, 0px 18px 0 #00b1cc, 0px 19px 0 #00b1cc, 4px 11px 0 #00b1cc, 4px 12px 0 #00b1cc, 4px 13px 0 #00b1cc, 4px 14px 0 #00b1cc, 4px 15px 0 #00b1cc, 4px 16px 0 #00b1cc, 4px 17px 0 #00b1cc, -4px 11px 0 #00b1cc, -4px 12px 0 #00b1cc, -4px 13px 0 #00b1cc, -4px 14px 0 #00b1cc, -4px 15px 0 #00b1cc, -4px 16px 0 #00b1cc, -4px 17px 0 #00b1cc, 3px 7px 0 #00b1cc, 4px 8px 0 #00b1cc, -4px 9px 0 #00b1cc, 0 41px 30px #000;

}