Floating navigation Page header + 3D rotating CUBE

Do you want to share WYSIWYG Web Builder tips, tricks, tutorials or useful HTML code? You can post it here...
(no questions or problems please, this section is not monitored by support).
Forum rules
This section is to share tips, tricks and tutorials related to WYSIWYG Web Builder.
Please do not post questions or problems here. They will not be answered.

PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901
Post Reply
informer
 
 
Posts: 19
Joined: Tue Nov 19, 2013 5:34 pm

Floating navigation Page header + 3D rotating CUBE

Post by informer »

For the floating navigation page header click here
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
Copy/paste in HTML area this code

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>
Add in the folder(Site root) images/cube/ the pictures (jpg, gif, png...)

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); }
}
Save cube.css on the site root
Add in the page html "between <head..." this link

Code: Select all

<link rel="stylesheet" href="cube2.css"/>
And see the result here
electrochrisso
 
 
Posts: 43
Joined: Mon Aug 19, 2013 8:39 am
Location: Darling River

Re: Floating navigation Page header + 3D rotating CUBE

Post by electrochrisso »

Interesting, thanks for sharing. :)
WYSIWYG THE GREATEST Web Builder EVER
lummis
 
 
Posts: 211
Joined: Sun Apr 24, 2011 9:18 am
Location: UK

Re: Floating navigation Page header + 3D rotating CUBE

Post by lummis »

Not sure if it is intentional or not but on my screen the rotating cube is larger than the header which looks a bit strange. Otherwise a cool effect!
informer
 
 
Posts: 19
Joined: Tue Nov 19, 2013 5:34 pm

Re: Floating navigation Page header + 3D rotating CUBE

Post by informer »

You're right but I'm not enough competent in CSS to correct this behavior!

I think the size cube is to large, so perhaps by reducing it, this will solve the problem ??? :?:

Second unexpected behavior, the cube is behind the carousel and I don't know how to do for pulling in ahead carousel :roll:

Help would be the welcome to enrich this post
Post Reply