Don't forget to read the post 15 " Floating navigation Page header - Set alignment left "
For adding a 3D rotating cube, do the following :
Add a layout Grid
Set 3 columns.
Add an HTML object in the second column of the layout Grid. It's for bordering the cube movement inside the viewport.
In the HTML Object
- Select in type list-box = "use <div> to set position..."
- Select in Overflow = Default
Code: Select all
<div class="stage centered">
<div class="cube">
<img class="cubeface" id="face1" src="images/cube/abeille150.jpg" />
<img class="cubeface" id="face2" src="images/cube/consultant150.png" />
<img class="cubeface" id="face3" src="images/cube/paul150.png" />
<img class="cubeface" id="face4" src="images/cube/plouf150.gif" />
<img class="cubeface" id="face5" src="images/cube/trinity150.gif" />
<img class="cubeface" id="face6" src="images/cube/platine150.gif" />
</div>
</div>
Create a CCS file, for example cube.css with notepad++
Copy/paste this code:
Code: Select all
body
{
/*background-image: url('img/texture.jpg');*/
}
.centered
{
/** On positionne le bloc au centre **/
position: absolute;
top: 50%;
left: 50%;
width: 50%;
height: 50%;
margin-left: -75px;
margin-top: -75px;
}
.stage
{
/* Application d'une perspective pour pouvoir avoir un rendu 3D */
-webkit-perspective: 700px;
-moz-perspective: 700px;
-ms-perspective: 700px;
-o-perspective: 700px;
perspective: 700px;
}
.cube
{
width: 50%;
height: 50%;
position: absolute;
width: 150px;
height: 150px;
/* Forcer le navigateur à conserver le mode de rendu 3d (ce qui n'est pas le cas par défaut) */
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
/* Application d'une animation sur l'élément .cube (qui contient nos faces) */
-webkit-animation: rotate-cube 15s linear infinite;
animation: rotate-cube 15s linear infinite;
}
/** Toutes les faces du cube ont la classe .cubeface
(plus pratique que d'écrire #face1, #face2, ...)
**/
.cubeface
{
position: absolute;
/** Application d'une transition pour
avoir un effet d'interpolation entre
l'état normal et l'état :hover pour
chaque face
**/
-webkit-transition: all 600ms;
-moz-transition: all 600ms;
-ms-transition: all 600ms;
-o-transition: all 600ms;
transition: all 600ms;
}
/** On déplace chaque face dans l'espace indépendamment,
pour construire notre cube
**/
#face1 {
-webkit-transform: translateZ(75px);
-moz-transform: translateZ(75px);
-ms-transform: translateZ(75px);
-o-transform: translateZ(75px);
transform: translateZ(75px);
}
#face2 {
-webkit-transform: translateX(75px) rotateY(90deg);
-moz-transform: translateX(75px) rotateY(90deg);
-ms-transform: translateX(75px) rotateY(90deg);
-o-transform: translateX(75px) rotateY(90deg);
transform: translateX(75px) rotateY(90deg);
}
#face3 {
-webkit-transform: translateX(-75px) rotateY(-90deg);
-moz-transform: translateX(-75px) rotateY(-90deg);
-ms-transform: translateX(-75px) rotateY(-90deg);
-o-transform: translateX(-75px) rotateY(-90deg);
transform: translateX(-75px) rotateY(-90deg);
}
#face4 {
-webkit-transform: translateZ(-75px);
-moz-transform: translateZ(-75px);
-ms-transform: translateZ(-75px);
-o-transform: translateZ(-75px);
transform: translateZ(-75px);
}
#face5 {
-webkit-transform: translateY(75px) rotateX(90deg);
-moz-transform: translateY(75px) rotateX(90deg);
-ms-transform: translateY(75px) rotateX(90deg);
-o-transform: translateY(75px) rotateX(90deg);
transform: translateY(75px) rotateX(90deg);
}
#face6 {
-webkit-transform: translateY(-75px) rotateX(-90deg);
-moz-transform: translateY(-75px) rotateX(-90deg);
-ms-transform: translateY(-75px) rotateX(-90deg);
-o-transform: translateY(-75px) rotateX(-90deg);
transform: translateY(-75px) rotateX(-90deg);
}
/*****************************************************************************
Si le .cube est en :hover, on change la translation de chaque face
pour qu'elles aillent un peu plus loin, et ainsi donner un
effet d'explosion du cube
***************************************************************************/
.cube.eclate > #face1,
.cube:hover > #face1 {
-webkit-transform: translateZ(95px);
-moz-transform: translateZ(95px);
-ms-transform: translateZ(95px);
-o-transform: translateZ(95px);
transform: translateZ(95px);
}
.cube.eclate > #face2,
.cube:hover > #face2 {
-webkit-transform: translateX(95px) rotateY(90deg);
-moz-transform: translateX(95px) rotateY(90deg);
-ms-transform: translateX(95px) rotateY(90deg);
-o-transform: translateX(95px) rotateY(90deg);
transform: translateX(95px) rotateY(90deg);
}
.cube.eclate > #face3,
.cube:hover > #face3 {
-webkit-transform: translateX(-95px) rotateY(-90deg);
-moz-transform: translateX(-95px) rotateY(-90deg);
-ms-transform: translateX(-95px) rotateY(-90deg);
-o-transform: translateX(-95px) rotateY(-90deg);
transform: translateX(-95px) rotateY(-90deg);
}
.cube.eclate > #face4,
.cube:hover > #face4 {
-webkit-transform: translateZ(-95px);
-moz-transform: translateZ(-95px);
-ms-transform: translateZ(-95px);
-o-transform: translateZ(-95px);
transform: translateZ(-95px);
}
.cube.eclate > #face5,
.cube:hover > #face5 {
-webkit-transform: translateY(95px) rotateX(90deg);
-moz-transform: translateY(95px) rotateX(90deg);
-ms-transform: translateY(95px) rotateX(90deg);
-o-transform: translateY(95px) rotateX(90deg);
transform: translateY(95px) rotateX(90deg);
}
.cube.eclate > #face6,
.cube:hover > #face6 {
-webkit-transform: translateY(-95px) rotateX(-90deg);
-moz-transform: translateY(-95px) rotateX(-90deg);
-ms-transform: translateY(-95px) rotateX(-90deg);
-o-transform: translateY(-95px) rotateX(-90deg);
transform: translateY(-95px) rotateX(-90deg);
}
/** Définition du comportement de l'animation qui fera tourner le cube **/
@-webkit-keyframes rotate-cube
{
from { -webkit-transform: rotateY(0deg) rotateZ(0deg); }
to { -webkit-transform: rotateY(360deg) rotateZ(360deg); }
}
@keyframes rotate-cube
{
from { transform: rotateY(0deg) rotateZ(0deg); }
to { transform: rotateY(360deg) rotateZ(360deg); }
}
Add in the page html "between <head..." this link
Code: Select all
<link rel="stylesheet" href="cube2.css"/>