Cube CSS3/HTML5

Il est possible de réaliser un cube à 3 faces avec du HTML5/CSS3 grace aux propriétés de rotation qu'apportent CSS3. 
Un exemple vaux mieux que mille exemple.

Le code est le suivant:

1. Partie CSS



body{
font-family:Helvetica;
    }

.cube       {
            position: absolute;
            left: 50%;
            top: 300px;
            margin-left: -200px;
          }

.cube p   {
            line-height: 14px;
            font-size: 12px;
          }

.cube h2 {
            font-weight: bold;
         }

.rightFace,
.leftFace,
.topFace div {
            padding: 10px;
            width: 180px;
            height: 180px;
            }

.rightFace,
.leftFace,
.topFace {
position: absolute;
            }

.leftFace {
-webkit-transform: skew(0deg, 30deg);
-moz-transform: skew(0deg, 30deg);
background-color: #ccc;
}

.rightFace {
-webkit-transform: skew(0deg, -30deg);
-moz-transform: skew(0deg, -30deg);
background-color: #ddd;
left: 200px;
}

.topFace div {
-webkit-transform: skew(0deg, -30deg) scale(1, 1.16);
-moz-transform: skew(0deg, -30deg) scale(1, 1.16);
background-color: #eee;
font-size: 0.862em;
}

.topFace {
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
top: -158px;
left: 100px;  
}

/* Optional WebKit Animations */
/*

.rightFace {
-webkit-transition: -webkit-transform 1s linear;
}

.leftFace {
-webkit-transition: -webkit-transform 1s linear;  
}

.topFace {
-webkit-transition: -webkit-transform 1s linear;
}

.cube:hover .rightFace {
-webkit-transform: skew(0deg, -30deg) translate(100px, 100px);
}

.cube:hover .leftFace {
-webkit-transform: skew(0deg, 30deg) translate(-100px, 100px);
}

.cube:hover .topFace {
-webkit-transform: rotate(60deg) translate(-50px, -50px);
}

/* Video */
.cube video {
left: -20px;
top: -20px;
position: relative;
}

.cube div.rightFace video {
left: -301px;
top: -35px;
opacity: 0.9;
}

.cube div.leftFace video {
opacity: 0.7;
top: -35px;
left: -100px;
}

.cube div.rightFace,
.cube div.leftFace {
overflow: hidden;
}

.cube div.topFace.video div {
background-color: #000;
color: #fff;
}

.textboxface
{
    width:100px;
    height:18px;
    padding:1px;
}

.buttonboxface
{
    width:65px;
    height:25px;
    padding:1px;
    font-size:11px;
}

.framebox2
{
    width:170px; height:100px; border:1px solid #000000
}

2. Partie HTML

<div id="experiment">
        <div class="cube">
            <div class="topFace"><div>
                <h2>Vue faciale</h2>
                <p>Le css3/HTML5 a telement évolué qu'on se permet de plusieurs expériences impossibles il y a 4 ans
                <img src='small_03.png' width='60' height='60'></p>
            </div>
            </div>
            <div class="leftFace">
                <h2>Face gauche </h2>
                <p> <div class='framebox2'> </div> </p>
            </div>
            <div class="rightFace">
                <h2>Face droite </h2>
                <p>Même un moteur de recherche. <input class='textboxface' type='text'> <input class='buttonboxface' type='button' value='Chercher'>
                <br><img src='small_01.jpg' width='80' height='70'></p>
                </p>
            </div>          
        </div>  
    </div>

Telecharger le code complet ici :