www.wysiwygwebbuilder.com

WYSIWYG Web Builder
https://www.wysiwygwebbuilder.com/forum/

Floating navigation Page header + 3D rotating CUBE

https://www.wysiwygwebbuilder.com/forum/viewtopic.php?t=79397

Page 1 of 1

Floating navigation Page header + 3D rotating CUBE

Posted: Wed Jan 17, 2018 5:23 pm
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

Re: Floating navigation Page header + 3D rotating CUBE

Posted: Thu Jan 18, 2018 5:13 am
by electrochrisso
Interesting, thanks for sharing. :)

Re: Floating navigation Page header + 3D rotating CUBE

Posted: Thu Jan 18, 2018 12:22 pm
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!

Re: Floating navigation Page header + 3D rotating CUBE

Posted: Thu Jan 18, 2018 6:39 pm
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
All times are UTC
Page 1 of 1

Powered by phpBB® Forum Software © phpBB Limited