//http://www.we-are-gurus.com/blog/1501-create-a-3d-block-with-css3
<div id="box" mode="real3d">K</div>
Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.Hello, world.
body {
-webkit-perspective:1000px;
-moz-perspective:75;
-o-perspective:1000px;
-webkit-perspective-origin:200px -150px;
-moz-perspective-origin:200px -150px;
-o-perspective-origin:200px -150px;
background-color:orange;
}
#box, #box::before, #box::after {
display: block;
position: absolute;
top: 90px;
left: 100px;
width: 200px;
height: 200px;
background: #79553A;
background-size: 100% 300%;
color:white;
font-size:180px;
text-align:center;
text-shadow: rgba(0,0,0,0.5) -1px 0, rgba(0,0,0,0.3) 0 -1px, rgba(255,255,255,0.5) 0 1px, rgba(0,0,0,0.3) -1px -2px;
}
#box[mode="real3d"] {
top:120px;
left:70px;
width:200px;
height:200px;
-webkit-transform-style:preserve-3d;
-webkit-transform:translateX(-20%) rotateY(-45deg);
-moz-transform:translateX(-20%) rotateY(-45deg);
-o-transform:translateX(-20%) rotateY(-45deg);
}
#box[mode="real3d"]::before {
content:"Z";
top:-100px;
width:200px;
height:200px;
background-color:rgba(0,0,255,.4);
-webkit-transform:rotateY(90deg) rotateX(90deg) translate(50%, -50%);
-moz-transform:rotateY(90deg) rotateX(90deg) translate(50%, -50%);
-o-transform:rotateY(90deg) rotateX(90deg) translate(50%, -50%);
}
#box[mode="real3d"]::after {
content:"H";
top:0px;
width:200px;
height:200px;
background-color:rgba(0,255,0,.4);
-webkit-transform:rotateY(90deg) translateX(50%);
-moz-transform:rotateY(90deg) translateX(50%);
-o-transform:rotateY(90deg) translateX(50%);
}