Фон на чистом css с 3D эффектом

Оригинальный фон с 3D эффектом на чистом css. Пример создан благодаря использованию css свойства transform, которое позволяет трансформировать элемент, в частности, позволяет его масштабировать, вращать, сдвигать, наклонять, а также комбинировать виды трансформаций.

HTML

<div class="wrap">
 <div class="wrapinner">
 <div class="cube">
 <div class="cell cell1"></div>
 <div class="cell cell4"></div>
 <div class="cell cell5"></div>
 </div>
 <div class="cube">
 <div class="cell cell1"></div>
 <div class="cell cell4"></div>
 <div class="cell cell5"></div>
..............

CSS

</pre>
body {
background: rgb(170,170,170);
font-size: 0;
-webkit-perspective: 2700px;
-webkit-perspective-origin : center center;
perspective-origin : 50% 50%;
padding: 0;
margin: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.wrap {
width:100%;
height: 100%;
overflow: hidden;
position: relative;
}
.wrapinner {
position: relative;
width: 120%;
height: 120%;
margin-left: -10%;
margin-top: -10%;
}
.cube {
position: relative;
-webkit-transform: rotateX(41deg) rotateY(-6deg) rotateZ(28deg);
-webkit-transform-origin: 0;
-webkit-transform-style : preserve-3d;
width: 50px;
height: 50px;
display: inline-block;
padding-right: 12px;
}
.cell {
width: 50px;
height: 50px;
position: absolute;
top: 0;
left: 0;
background: gray;
-webkit-transform-origin: 50% 50%;
}
.cell1{
background: linear-gradient(to left, rgba(170,170,170,1) 0%,rgba(200,200,200,1) 100%);
-webkit-transform: translateX(24px) rotateY(90deg);
}
.cell2{
display: none;
background: green;
-webkit-transform: translateX(-25px) rotateY(-90deg);
}
.cell3 {
display: none;
background: blue;
-webkit-transform: translateY(-25px) rotateX(-90deg);
}
.cell4 {
background: linear-gradient(to bottom, rgba(170,170,170,1) 0%,rgba(200,200,200,1) 100%);
-webkit-transform: translateY(24px) rotateX(90deg);
}
.cell5 {
background: rgb(205,205,205);
-webkit-transform: translateZ(24px);
}
<pre>