<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3 使用立方体几何模型构建3D文字效果</title>
<style>
/* BASE
------------------------------------------------------------ */
html {
width: 100%;
background: #222;
}
body {
text-align: center;
font: 400 16px Helvetica, Arial, sans-serif;
padding: 0;
margin: 0;
color: white;
text-align: center;
font-size: 50px;
}
* {
-webkit-box-sizing: border-box;
/* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;
/* Firefox, other Gecko */
box-sizing: border-box;
}
/* Common & grid
------------------------------------------------------------ */
h1 {
font-size: 1em;
font-weight: lighter;
text-transform: uppercase;
}
.main {
text-align: center;
width: 100%;
}
ul {
margin: 50px auto 100px;
padding: 0;
list-style: none;
display: block;
max-width: 95%;
font-size: 0;
}
ul li {
position: relative;
display: inline-block;
margin: 0;
padding: 0;
/*overflow: hidden;*/
}
.hello li {
/*Change size of letter */
font-size: 16px;
height: 7em;
width: 6em;
}
.grid li {
/*Change size of letter */
font-size: 30px;
height: 9em;
width: 9em;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
ul li div {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
width: 5em;
height: 5em;
-webkit-animation: rotation 6s linear 0s infinite;
-moz-animation: rotation 6s linear 0s infinite;
-o-animation: rotation 6s linear 0s infinite;
animation: rotation 6s linear 0s infinite;
}
ul span {
position: absolute;
display: block;
/*border: 1px solid grey;*/
background: rgba(255, 255, 255, 0.5);
background: #FFF;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
}
ul .front,
ul .back {
background: none;
border-color: #FFF;
border-style: solid;
}
ul .back {
transform: rotateX(180deg) translateZ(1em);
}
ul .top {
background: rgba(150, 150, 150, 0.5);
background: #969696;
transform: rotateX(90deg) translateY(-0.5em);
}
ul .bottom {
background: rgba(150, 150, 150, 0.5);
background: #969696;
transform: rotateX(-90deg) translateY(0.5em);
}
ul .left {
background: rgba(204, 204, 204, 0.5);
background: #CCCCCC;
transform: rotateY(-90deg) translateX(-0.5em);
}
ul .right {
background: rgba(204, 204, 204, 0.5);
background: #CCCCCC;
transform: rotateY(90deg) translateX(0.5em);
}
/* animation
------------------------------------------------------------ */
@-webkit-keyframes rotation {
0% {
-webkit-transform: rotateY(50deg) rotateX(20deg) rotateZ(10deg);
}
25% {
-webkit-transform: rotateY(-50deg) rotateX(20deg) rotateZ(10deg);
}
50% {
-webkit-transform: rotateY(50deg) rotateX(20deg) rotateZ(10deg);
}
75% {
-webkit-transform: rotateY() rotateX(20deg) rotateZ(10deg);
}
100% {
-webkit-transform: rotateY(410deg) rotateX(20deg) rotateZ(10deg);
}
}
@-moz-keyframes rotation {
0% {
-moz-transform: rotateY(50deg) rotateX(20deg) rotateZ(10deg);
}
25% {
-moz-transform: rotateY(-50deg) rotateX(20deg) rotateZ(10deg);
}
50% {
-moz-transform: rotateY(50deg) rotateX(20deg) rotateZ(10deg);
}
75% {
-moz-transform: rotateY() rotateX(20deg) rotateZ(20deg);
}
100% {
-moz-transform: rotateY(410deg) rotateX(20deg) rotateZ(10deg);
}
}
@keyframes rotation {
0% {
transform: rotateY(50deg) rotateX(20deg) rotateZ(10deg);
}
25% {
transform: rotateY(-50deg) rotateX(20deg) rotateZ(10deg);
}
50% {
transform: rotateY(50deg) rotateX(20deg) rotateZ(10deg);
}
75% {
transform: rotateY() rotateX(20deg) rotateZ(10deg);
}
100% {
transform: rotateY(410deg) rotateX(20deg) rotateZ(10deg);
}
}
/* E
------------------------------------------------------------ */
.e-front-1,
.e-back-1 {
top: 0;
left: 0;
width: 5em;
height: 5em;
border-width: 1em 0 1em 1em;
}
.e-front-2,
.e-back-2 {
top: 2em;
left: 0em;
width: 4em;
height: 1em;
border-width: 1em 0 0;
}
.e-left-1 {
top: 0;
left: -0.5em;
width: 1em;
height: 5em;
}
.e-right-1 {
top: 0;
left: 4.5em;
width: 1em;
height: 1em;
}
.e-right-2 {
top: 1em;
left: 0.5em;
width: 1em;
height: 1em;
}
.e-right-3 {
top: 2em;
left: 3.5em;
width: 1em;
height: 1em;
}
.e-right-4 {
top: 3em;
left: 0.5em;
width: 1em;
height: 1em;
}
.e-right-5 {
top: 4em;
left: 4.5em;
width: 1em;
height: 1em;
}
.e-top-1 {
top: -0.5em;
left: 0em;
width: 5em;
height: 1em;
}
.e-top-2 {
top: 1.5em;
left: 1em;
width: 3em;
height: 1em;
}
.e-top-3 {
top: 3.5em;
left: 1em;
width: 4em;
height: 1em;
}
.e-bottom-1 {
top: 0.5em;
left: 1em;
width: 4em;
height: 1em;
}
.e-bottom-2 {
top: 2.5em;
left: 1em;
width: 3em;
height: 1em;
}
.e-bottom-3 {
top: 4.5em;
left: 0em;
width: 5em;
height: 1em;
}
/* H
------------------------------------------------------------ */
.h-front-1,
.h-back-1 {
top: 0;
left: 0;
width: 5em;
height: 5em;
border-width: 0 1em;
}
.h-front-2,
.h-back-2 {
top: 2em;
left: 0em;
width: 5em;
height: 1em;
border-width: 1em 0 0;
}
.h-left-1 {
top: 0;
left: -0.5em;
width: 1em;
height: 5em;
}
.h-left-2 {
top: 0;
left: 3.5em;
width: 1em;
height: 2em;
}
.h-left-3 {
top: 3em;
left: 3.5em;
width: 1em;
height: 2em;
}
.h-right-1 {
top: 0;
left: 0.5em;
width: 1em;
height: 2em;
}
.h-right-2 {
top: 3em;
left: 0.5em;
width: 1em;
height: 2em;
}
.h-right-3 {
top: 0em;
left: 4.5em;
width: 1em;
height: 5em;
}
.h-top-1 {
top: -0.5em;
left: 0em;
width: 1em;
height: 1em;
}
.h-top-2 {
top: 1.5em;
left: 1em;
width: 3em;
height: 1em;
}
.h-top-3 {
top: -0.5em;
left: 4em;
width: 1em;
height: 1em;
}
.h-bottom-1 {
top: 4.5em;
left: 0em;
width: 1em;
height: 1em;
}
.h-bottom-2 {
top: 2.5em;
left: 1em;
width: 3em;
height: 1em;
}
.h-bottom-3 {
top: 4.5em;
left: 4em;
width: 1em;
height: 1em;
}
/* L
------------------------------------------------------------ */
.l-front-1 {
top: 0;
left: 0;
width: 5em;
height: 5em;
border-width: 0 0 1em 1em;
}
.l-back-1 {
top: 0em;
left: 0;
width: 5em;
height: 5em;
border-width: 1em 0 0 1em;
}
.l-left-1 {
top: 0;
left: -0.5em;
width: 1em;
height: 5em;
}
.l-right-1 {
top: 0;
left: 0.5em;
width: 1em;
height: 4em;
}
.l-right-2 {
top: 4em;
left: 4.5em;
width: 1em;
height: 1em;
}
.l-top-1 {
top: -0.5em;
left: 0;
width: 1em;
height: 1em;
}
.l-top-2 {
top: 3.5em;
left: 1em;
width: 4em;
height: 1em;
}
.l-bottom-1 {
top: 4.5em;
left: 0;
width: 5em;
height: 1em