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 :
