Partage

cube en 3d

17 mars 2018 à 13:07:58

bonjour voila je résume je suis en se moment je créé un menu avec 6 cube donc 24 face avec un effet de zoom a l intérieur de mes interfaces le truc c est que je suis en train de voir avec 2 cube le problème est le suivant j ai mon 1er cube qui affiche mal le zoom je vous envoie le code :colere:

html:

	<div class="container">
<div id="cube">

<div id="front">
<div class="contenu"><div class=zoom><div class=actu><p>L'Actualité</p></div></div></div></div>

<div id="back">
<img src="http://debray.jerome.free.fr/application/images/slideshow/5.jpg" height="200"></div>

<div id="right">
<img src="http://debray.jerome.free.fr/application/images/slideshow/5.jpg" height="200"></div>

<div id="left">
<img src="http://debray.jerome.free.fr/application/images/slideshow/5.jpg" height="200"></div>

</div>
</div>

<div class="left"></div>
<div class="right"></div>

<div class="containerb">
<div id="cubeb">

<div id="front">
<div class="contenub"><div class=zoomb><div class=actub><p>...</p></div></div></div></div>

<div id="backb"><img src="http://debray.jerome.free.fr/application/images/slideshow/5.jpg" height="200"></div>

<div id="rightb"><img src="http://debray.jerome.free.fr/application/images/slideshow/5.jpg" height="200"></div>

<div id="leftb"><img src="http://debray.jerome.free.fr/application/images/slideshow/5.jpg" height="200"></div>

</div>
</div>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    var deg = 0;
    $('.left').click(function(){
        deg += 90;
        $('#cube, #cubeb').css('-webkit-transform', 'rotateY(' + deg + 'deg)');
    });
    $('.right').click(function(){
        deg -= 90;
        $('#cube, #cubeb').css('-webkit-transform', 'rotateY(' + deg + 'deg)');
    });
});
</script>

css:

/*1er cube*/
.container 
{
    -webkit-perspective: 600;
    margin-top: 300px;
    margin-left: -700px;
}

#cube
{
    width: 200px;
    height: 200px;
    margin: 0 auto 40px;
    -webkit-transform-style: preserve-3d;
    -webkit-transition: -webkit-transform 2s;
}

#cube div
{
    position:absolute;
    -webkit-backface-visibility: visible;
    overflow:hidden;
    width:200px;
    height:150px;
}

#front
{
    -webkit-transform: translateZ( 100px );
}

#back
{
    -webkit-transform: translateZ( -100px );
}
#left
{
    -webkit-transform: rotateY( 90deg ) translateZ( 100px );
}

#right
{
    -webkit-transform: rotateY( -90deg ) translateZ( 100px );
}

#up
{
    -webkit-transform: rotateX(90deg) translateZ( 100px );
}

#bottom
{
    -webkit-transform: rotateX(-90deg) translateZ( 100px );
}


/*2ème cube*/
.containerb
{
    -webkit-perspective : 600;
    margin-top: -240px;
    margin-left: -120px;
}

#cubeb
{
    width: 200px;
    height: 200px;
    margin: 0 auto 40px;
    -webkit-transform-style: preserve-3d;
    -webkit-transition: -webkit-transform 2s;
}

#cubeb div
{
    position:absolute;
    -webkit-backface-visibility: visible;
    overflow:hidden;
    width:200px;
    height:150px;

}

#frontb
{
    -webkit-transform: translateZ( 100px );
}

#backb
{
    -webkit-transform: translateZ( -100px );
}

#leftb
{
    -webkit-transform: rotateY( 90deg ) translateZ( 100px );
}

#rightb
{
    -webkit-transform: rotateY( -90deg ) translateZ( 100px );
}

#upb
{
    -webkit-transform: rotateX(90deg) translateZ( 100px );
}

#bottomb
{
    -webkit-transform: rotateX(-90deg) translateZ( 100px );
}


.left, .right{
    width:50px;
    height:50px;
    background:#069;
    position:relative;
    margin-left: 0px;
    margin-top: -180px;
}
.right {
    margin-right: 30px;
    float: right;
    margin-top: -50px;
}


.right:hover{
    background-color: red;
}

.left:hover{
    background-color: red;
}

.left:after, .right:after{
    content:'';
    position:absolute;
    background:transparent;
    width:1px;
    height:1px;
    border:1px solid #000;
    border-color: transparent #000 transparent transparent ;
    border-width:10px;
    left:7px;
    top:13px;
}
.right:after{
    border-color: transparent transparent transparent #000 ;
    left:22px;
}


.zoom
{
width: 200px;
height: 150px;
color: white;
font-size: 30px;
text-align: center;
}

.actu 
{
width: 200px;
height: 105px;
background-color: #52BE80;
font-family: Pacifico;
position: absolute;
padding-top: 20px;
}

.actu
{
/* La transition s'applique à la fois sur la largeur et la hauteur, avec une durée d'une seconde. */
-webkit-transition: all 1s ease; /* Safari et Chrome */
-moz-transition: all 1s ease; /* Firefox */
-ms-transition: all 1s ease; /* Internet Explorer 9 */
-o-transition: all 1s ease; /* Opera */
transition: all 1s ease;
}

.actu:hover
{
/* L'image est grossie de 25% */
-webkit-transform:scale(1.25); /* Safari et Chrome */
-moz-transform:scale(1.25); /* Firefox */
-ms-transform:scale(1.25); /* Internet Explorer 9 */
-o-transform:scale(1.25); /* Opera */
transform:scale(1.25);
background-color: #82E0AA;
}


.zoomb
{
width: 200px;
height: 150px;
color: white;
font-size: 30px;
text-align: center;
}

.actub 
{
width: 200px;
height: 105px;
background-color: #52BE80;
font-family: Pacifico;
position: absolute;
padding-top: 20px;
}

.actub
{
/* La transition s'applique à la fois sur la largeur et la hauteur, avec une durée d'une seconde. */
-webkit-transition: all 1s ease; /* Safari et Chrome */
-moz-transition: all 1s ease; /* Firefox */
-ms-transition: all 1s ease; /* Internet Explorer 9 */
-o-transition: all 1s ease; /* Opera */
transition: all 1s ease;
}

.actub:hover
{
/* L'image est grossie de 25% */
-webkit-transform:scale(1.25); /* Safari et Chrome */
-moz-transform:scale(1.25); /* Firefox */
-ms-transform:scale(1.25); /* Internet Explorer 9 */
-o-transform:scale(1.25); /* Opera */
transform:scale(1.25);
background-color: #82E0AA;
}

Rien n'est existentiel tous n'est qu'illusion

nossibe

17 mars 2018 à 22:31:24

Bonsoir nans perain,

6 cubes = 24 faces... il va falloir que tu m'expliques, 2 des faces ne sont jamais visible peut être...

Chez moi "Lactualité" grossit bien en hover, peux tu être plus précis sur le problème et l'effet attendu ?

-
Edité par nossibe 17 mars 2018 à 22:31:42

Blackbalrog

18 mars 2018 à 20:08:41

C'est Dingue moi il grossi(e)(s)(?) que si je passe la souris en haut de la case bizard je sais pas d ou est le problème

edit: a par si je le déplace plus bas la sa marche

-
Edité par Blackbalrog 18 mars 2018 à 20:10:02

Rien n'est existentiel tous n'est qu'illusion

nossibe

18 mars 2018 à 20:55:31

Sous Chrome effectivement il y a un problème lorsque la sourie posse au dessus du haut du cube de gauche.

ça vient du fait que la div "containerb" passe devant "container".

Il faudrait créer un conteneur global qui positionne tout le slider dans la page.

Puis, à l’intérieur de celui-ci, tu positionnes tes cubes (que tu renommes cubeOne, cubeTwo... à la place de container, containerb car ce ne sont pas des conteneurs).

Pour que les cubes n'entrent pas en conflit, donne leur une largeur et une hauteur définie avant de les positionner. Car ton problème actuel vient du fait que tes cubes font toute la largeur de la page.

Bon codage, tu es sur la bonne voie

PS: Merci de bien vouloir indenter ton code correctement car là il est illisible...

-
Edité par nossibe 18 mars 2018 à 20:57:58

Blackbalrog

18 mars 2018 à 23:59:40

merci pour ton conseil je vais l appliquer de se pas (demain ^^') en tous cas tu me sauve cela fais 4 jour que je commencé a avoir mal au crane merci beaucoup.

Rien n'est existentiel tous n'est qu'illusion

Blackbalrog

22 mars 2018 à 10:59:36

désoler je ré ouvre le sujet car je rencontre un nouveau problème ^^' le même problème en faite le faite de mettre une div (conteneur) m avait aider mais lorsque j augmente le nombre de cube le problème revient j ai fais se que tu ma dis CubeOne CubeTwo ect en faite c est quand j ai rajouter le 3eme cube le 1er et le 2eme le zoom marche plus bien ^^' chui désoler je remet mon code:

html:

<div id="conteneur">

<div class="CubeOne">
<div id="cubea">

<div id="front">
<div class="contenu"><div class="zoom"><div class="actu"><p>1</p></div></div></div></div>

<div id="back">
<img src="http://debray.jerome.free.fr/application/images/slideshow/5.jpg" height="200"></div>

<div id="right">
<img src="http://debray.jerome.free.fr/application/images/slideshow/5.jpg" height="200"></div>

<div id="left">
<img src="http://debray.jerome.free.fr/application/images/slideshow/5.jpg" height="200"></div>

</div>
</div>

<div class="CubeTwo">
<div id="cubeb">

<div id="front">
<div class="contenu"><div class="zoom"><div class="actu"><p>2</p></div></div></div></div>

<div id="back">
<img src="http://debray.jerome.free.fr/application/images/slideshow/5.jpg" height="200"></div>

<div id="right">
<img src="http://debray.jerome.free.fr/application/images/slideshow/5.jpg" height="200"></div>

<div id="left">
<img src="http://debray.jerome.free.fr/application/images/slideshow/5.jpg" height="200"></div>

</div>
</div>

<div class="CubeThree">
<div id="cubec">

<div id="front">
<div class="contenu"><div class="zoom"><div class="actu"><p>3</p></div></div></div></div>

<div id="back">
<img src="http://debray.jerome.free.fr/application/images/slideshow/5.jpg" height="200"></div>

<div id="right">
<img src="http://debray.jerome.free.fr/application/images/slideshow/5.jpg" height="200"></div>

<div id="left">
<img src="http://debray.jerome.free.fr/application/images/slideshow/5.jpg" height="200"></div>

</div>
</div>

</div>

<div class="left"></div>
<div class="right"></div>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    var deg = 0;
    $('.left').click(function(){
        deg += 90;
        $('#cubea, #cubeb, #cubec').css('-webkit-transform', 'rotateY(' + deg + 'deg)');
    });
    $('.right').click(function(){
        deg -= 90;
        $('#cubea, #cubeb, #cubec').css('-webkit-transform', 'rotateY(' + deg + 'deg)');
    });
});
</script>

css :

/*1er cube*/
.CubeOne
{
    -webkit-perspective: 600;
    margin-top: 100px;
    margin-right: 600px;
}
#cubea
{
    width: 200px;
    height: 100px;
    margin: 0 auto 40px;
    -webkit-transform-style: preserve-3d;
    -webkit-transition: -webkit-transform 2s;
}
#cubea div
{
    position:absolute;
    -webkit-backface-visibility: visible;
    overflow:hidden;
    width: 200px;
    height: 150px;
}
#front
{
    -webkit-transform: translateZ( 100px );
}
#back
{
    -webkit-transform: translateZ( -100px );
}
#left
{
    -webkit-transform: rotateY( 90deg ) translateZ( 100px );
}
#right
{
    -webkit-transform: rotateY( -90deg ) translateZ( 100px );
}
#up
{
    -webkit-transform: rotateX(90deg) translateZ( 100px );
}
#bottom
{
    -webkit-transform: rotateX(-90deg) translateZ( 100px );
}

/*2ème cube*/
.CubeTwo
{
    -webkit-perspective : 600;
    margin-top: -140px;
}

#cubeb
{
    width: 200px;
    height: 100px;
    margin: 0 auto 40px;
    -webkit-transform-style: preserve-3d;
    -webkit-transition: -webkit-transform 2s;
}
#cubeb div
{
    position:absolute;
    -webkit-backface-visibility: visible;
    overflow:hidden;
    width: 200px;
    height: 150px;
}

/*3ème cube*/
.CubeThree
{
    -webkit-perspective : 600;
    margin-left: 600px;
    margin-top: -140px;
}

#cubec
{
    width: 200px;
    height: 100px;
    margin: 0 auto 40px;
    -webkit-transform-style: preserve-3d;
    -webkit-transition: -webkit-transform 2s;
}
#cubec div
{
    position:absolute;
    -webkit-backface-visibility: visible;
    overflow:hidden;
    width: 200px;
    height: 150px;
}


.left, .right
{
    width:50px;
    height:50px;
    background:#069;
    position:relative;
    margin-left:0 50px;
    margin-top: 0px;
}
.right {
    margin-left: 300px;
    float: right;
    margin-top: -50px;
}


.zoom
{
width: 200px;
height: 150px;
color: white;
font-size: 30px;
text-align: center;
}

.actu 
{
width: 200px;
height: 105px;
background-color: #52BE80;
font-family: Pacifico;
position: absolute;
padding-top: 20px;
}

.actu
{
/* La transition s'applique à la fois sur la largeur et la hauteur, avec une durée d'une seconde. */
-webkit-transition: all 1s ease; /* Safari et Chrome */
-moz-transition: all 1s ease; /* Firefox */
-ms-transition: all 1s ease; /* Internet Explorer 9 */
-o-transition: all 1s ease; /* Opera */
transition: all 1s ease;
}

.actu:hover
{
/* L'image est grossie de 25% */
-webkit-transform:scale(1.25); /* Safari et Chrome */
-moz-transform:scale(1.25); /* Firefox */
-ms-transform:scale(1.25); /* Internet Explorer 9 */
-o-transform:scale(1.25); /* Opera */
transform:scale(1.25);
background-color: #82E0AA;
}

ps: si quelqu un peut m aider a comprendre pour les prochain je prend merci.

Rien n'est existentiel tous n'est qu'illusion

philiga

22 mars 2018 à 11:57:41

Bonjour,

C'est normal: ton conteneur .CubeTwo n'a pas de width définie.

Il fait donc toute la largeur de l'écran et obstrue le 1er cube.

Mets-lui provisoirement un border:2px solid blue; et tu verras le problème.

Tu devrais positionner tes 3 cubes dans un conteneur en display:table; ou flex;

"La Vérité doit être dite, le monde dût-il en voler en éclats" (J. G. Fichte)

Blackbalrog

22 mars 2018 à 13:17:52

merci je vais essayer sa un peu plus tard je suis pas chez moi

Rien n'est existentiel tous n'est qu'illusion

philiga

22 mars 2018 à 16:12:45

Oups, correctif: en regardant à nouveau ton code sur jsbin.com, je n'ai plus le problème de la div.CubeTwo faisant obstacle au hover sur le 1er.

Normal puisque tu as positionné en absolute #cubea div {.

J'avais du enlever cet absolute précédemment en bidouillant ton code.

Je n'ai plus le souci décrit en ce moment après avoir nettoyé ton code des préfixes, inutiles aujourd'hui (d'autant que quand tu ne mets que -webkit-, ton code ne fonctionnera pas sur Firefox et Edge...).

Je pense que les soucis quand ils apparaissent peuvent être liés aux "courts-circuits" que font tes multiples répétitions d'id.

Passe ton code au validateur, il va t'alerter: https://validator.w3.org/nu/#textarea

Un id doit absolument être unique par page. Hors tu as remis #front,#back,#right & #left à chaque cube.

Corrige cela en les numérotant.

Ton CSS épuré ci-dessous des préfixes inutiles, mais qui reste donc à corriger comme l'html pour éviter les répétitions d'id:

/*1er cube*/

.CubeOne {
    margin-top: 100px;
    margin-right: 600px;
    perspective: 600;
}

#cubea {
    width: 200px;
    height: 100px;
    margin: 0 auto 40px;
    transition: transform 2s;
    transform-style: preserve-3d;
}

#cubea div {
    position: absolute;
    width: 200px;
    height: 150px;
    overflow: hidden;
    backface-visibility: visible;
}

#front {
    transform: translateZ(100px);
}

#back {
    transform: translateZ(-100px);
}

#left {
    transform: rotateY(90deg) translateZ(100px);
}

#right {
    transform: rotateY(-90deg) translateZ(100px);
}

#up {
    transform: rotateX(90deg) translateZ(100px);
}

#bottom {
    transform: rotateX(-90deg) translateZ(100px);
}

/*2ème cube*/

.CubeTwo {
    margin-top: -140px;
    perspective: 600;
}

#cubeb {
    width: 200px;
    height: 100px;
    margin: 0 auto 40px;
    transition:transform 2s;
    transform-style: preserve-3d;
}

#cubeb div {
    position: absolute;
    width: 200px;
    height: 150px;
    overflow: hidden;
    backface-visibility: visible;
}

/*3ème cube*/

.CubeThree {
    margin-top: -140px;
    margin-left: 600px;
    perspective: 600;
}

#cubec {
    width: 200px;
    height: 100px;
    margin: 0 auto 40px;
    transition: transform 2s;
    transform-style: preserve-3d;
}

#cubec div {
    position: absolute;
    width: 200px;
    height: 150px;
    overflow: hidden;
    backface-visibility: visible;
}

.left,
.right {
    position: relative;
    width: 50px;
    height: 50px;
    margin-top: 0;
    margin-left: 0 50px;
    background: #069;
}

.right {
    float: right;
    margin-top: -50px;
    margin-left: 300px;
}

.zoom {
    width: 200px;
    height: 150px;
    text-align: center;
    font-size: 30px;
    color: white;
}

.actu {
    position: absolute;
    width: 200px;
    height: 105px;
    padding-top: 20px;
    font-family: Pacifico;
    background-color: #52BE80;
}

.actu {
    transition: all 1s ease;
}

.actu:hover {
    background-color: #82E0AA;
    transform: scale(1.25);
}

-
Edité par philiga 22 mars 2018 à 16:15:29

"La Vérité doit être dite, le monde dût-il en voler en éclats" (J. G. Fichte)

Blackbalrog

22 mars 2018 à 16:41:09

excuser moi de ré ouvrir mon sujet mais voila j ai un dernier problème je crois sa dois être le ultime je pense mdr mais voila sur tous mes cube la face marche nickel mais lorsque je tourne le cube bha la face 1.1 1.2 1.3 1.4 marche plus genre sa zoom plus heeeelp svp merci

je réaffiche mon code :/

html

<!DOCTYPE html>
<html>
<head>
	<title>test2</title>
    <meta charset="utf-8"/>
    <link rel="stylesheet" href="style.css"/>
</head>
<body>

<div id="conteneur">

<div class="CubeOne">
<div id="cubea">

<div id="front">
<div class="contenu"><div class="zoom"><div class="actua"><p>1.0</p></div></div></div></div>

<div id="back">
<div class="contenu"><div class="zoom"><div class="actua"><p>3.1</p></div></div></div></div>

<div id="right">
<div class="contenu"><div class="zoom"><div class="actua"><p>1.4</p></div></div></div></div>

<div id="left">
<div class="contenu"><div class="zoom"><div class="actua"><p>1.1</p></div></div></div></div>

</div>
</div>

<div class="CubeTwo">
<div id="cubeb">

<div id="front">
<div class="contenu"><div class="zoom"><div class="actub"><p>2.0</p></div></div></div></div>

<div id="back">
<div class="contenu"><div class="zoom"><div class="actub"><p>3.2</p></div></div></div></div>

<div id="right">
<div class="contenu"><div class="zoom"><div class="actub"><p>2.4</p></div></div></div></div>

<div id="left">
<div class="contenu"><div class="zoom"><div class="actub"><p>2.1</p></div></div></div></div>

</div>
</div>

<div class="CubeThree">
<div id="cubec">

<div id="front">
<div class="contenu"><div class="zoom"><div class="actuc"><p>3.0</p></div></div></div></div>

<div id="back">
<div class="contenu"><div class="zoom"><div class="actuc"><p>3.3</p></div></div></div></div>

<div id="right">
<div class="contenu"><div class="zoom"><div class="actuc"><p>3.4</p></div></div></div></div>

<div id="left">
<div class="contenu"><div class="zoom"><div class="actuc"><p>3.1</p></div></div></div></div>

</div>
</div>

<div class="CubeFour">
<div id="cubed">

<div id="front">
<div class="contenu"><div class="zoom"><div class="actud"><p>4.0</p></div></div></div></div>

<div id="back">
<div class="contenu"><div class="zoom"><div class="actud"><p>3.4</p></div></div></div></div>

<div id="right">
<div class="contenu"><div class="zoom"><div class="actud"><p>4.4</p></div></div></div></div>

<div id="left">
<div class="contenu"><div class="zoom"><div class="actud"><p>4.1</p></div></div></div></div>

</div>
</div>

<div class="CubeFive">
<div id="cubee">

<div id="front">
<div class="contenu"><div class="zoom"><div class="actue"><p>5.0</p></div></div></div></div>

<div id="back">
<div class="contenu"><div class="zoom"><div class="actue"><p>3.5</p></div></div></div></div>

<div id="right">
<div class="contenu"><div class="zoom"><div class="actue"><p>5.4</p></div></div></div></div>

<div id="left">
<div class="contenu"><div class="zoom"><div class="actue"><p>5.1</p></div></div></div></div>

</div>
</div>

<div class="CubeSix">
<div id="cubef">

<div id="front">
<div class="contenu"><div class="zoom"><div class="actuf"><p>6.0</p></div></div></div></div>

<div id="back">
<div class="contenu"><div class="zoom"><div class="actuf"><p>3.6</p></div></div></div></div>

<div id="right">
<div class="contenu"><div class="zoom"><div class="actuf"><p>6.4</p></div></div></div></div>

<div id="left">
<div class="contenu"><div class="zoom"><div class="actuf"><p>6.1</p></div></div></div></div>

</div>
</div>

</div>

<div class="left"></div>
<div class="right"></div>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    var deg = 0;
    $('.left').click(function(){
        deg += 90;
        $('#cubea, #cubeb, #cubec, #cubed, #cubee, #cubef').css('-webkit-transform', 'rotateY(' + deg + 'deg)');
    });
    $('.right').click(function(){
        deg -= 90;
        $('#cubea, #cubeb, #cubec, #cubed, #cubee, #cubef').css('-webkit-transform', 'rotateY(' + deg + 'deg)');
    });
});
</script>

</body>
</html>

css :

.CubeOne {
    margin-top: 100px;
    margin-right: 600px;
    perspective: 600;
}
 
#cubea {
    width: 200px;
    height: 100px;
    margin: 0 auto 40px;
    transition: transform 2s;
    transform-style: preserve-3d;
}
 
#cubea div {
    position: absolute;
    width: 200px;
    height: 150px;
    overflow: hidden;
    backface-visibility: visible;
}
 
#front {
    transform: translateZ(100px);
        border: 1px solid black;
}
 
#back {
    transform: translateZ(-100px);
        border: 1px solid black;
}
 
#left {
    transform: rotateY(90deg) translateZ(100px);
        border: 1px solid black;
}
 
#right {
    transform: rotateY(-90deg) translateZ(100px);
        border: 1px solid black;
}
 
#up {
    transform: rotateX(90deg) translateZ(100px);
        border: 1px solid black;
}
 
#bottom {
    transform: rotateX(-90deg) translateZ(100px);
        border: 1px solid black;
}
 
/*2ème cube*/
 
.CubeTwo {
    margin-top: -140px;
    perspective: 600;
}
 
#cubeb {
    width: 200px;
    height: 100px;
    margin: 0 auto 40px;
    transition:transform 2s;
    transform-style: preserve-3d;
}
 
#cubeb div {
    position: absolute;
    width: 200px;
    height: 150px;
    overflow: hidden;
    backface-visibility: visible;
}
 
/*3ème cube*/
 
.CubeThree {
    margin-top: -140px;
    margin-left: 600px;
    perspective: 600;
}
 
#cubec {
    width: 200px;
    height: 100px;
    margin: 0 auto 40px;
    transition: transform 2s;
    transform-style: preserve-3d;
}
 
#cubec div {
    position: absolute;
    width: 200px;
    height: 150px;
    overflow: hidden;
    backface-visibility: visible;
}

/*4ème cube*/

.CubeFour {
    margin-top: 100px;
    perspective: 600;
    margin-right: 600px;
}
 
#cubed {
    width: 200px;
    height: 100px;
    margin: 0 auto 40px;
    transition: transform 2s;
    transform-style: preserve-3d;
}
 
#cubed div {
    position: absolute;
    width: 200px;
    height: 150px;
    overflow: hidden;
    backface-visibility: visible;
}

.CubeFive {
    perspective: 600;
    margin-top: -140px;
}
 
#cubee {
    width: 200px;
    height: 100px;
    margin: 0 auto 40px;
    transition: transform 2s;
    transform-style: preserve-3d;
}
 
#cubee div {
    position: absolute;
    width: 200px;
    height: 150px;
    overflow: hidden;
    backface-visibility: visible;
}

.CubeSix {
    perspective: 600;
    margin-top: -140px;
    margin-left: 600px;
}
 
#cubef {
    width: 200px;
    height: 100px;
    margin: 0 auto 40px;
    transition: transform 2s;
    transform-style: preserve-3d;
}
 
#cubef div {
    position: absolute;
    width: 200px;
    height: 150px;
    overflow: hidden;
    backface-visibility: visible;
}

 
.left,
.right {
    position: relative;
    width: 50px;
    height: 50px;
    margin-top: 0;
    margin-left: 0 50px;
    background: #069;
}
 
.left {
    float: right;
    margin-left: 300px;
}

.right:hover{
    background-color: red;
}

.left:hover{
    background-color: red;
}

.left:after, .right:after{
    content:'';
    position:absolute;
    background:transparent;
    width:1px;
    height:1px;
    border:1px solid #000;
    border-color: transparent #000 transparent transparent ;
    border-width:10px;
    left:7px;
    top:13px;
}
.left:after{
    border-color: transparent transparent transparent #000 ;
    left:22px;
}
 
/*interface couleur cube*/ 
.zoom {
    width: 200px;
    height: 150px;
    text-align: center;
    font-size: 30px;
    color: white;
}
 
.actua {
    position: absolute;
    width: 200px;
    height: 105px;
    padding-top: 20px;
    font-family: Pacifico;
    background-color: #52BE80;
    transition: all 1s ease;
}
 
.actua:hover {
    background-color: #82E0AA;
    transform: scale(1.25);
}

.actub {
    position: absolute;
    width: 200px;
    height: 105px;
    padding-top: 20px;
    font-family: Pacifico;
    background-color: #45B39D;
    transition: all 1s ease;
}
 
.actub:hover {
    background-color: #73C6B6;
    transform: scale(1.25);
}

.actuc {
    position: absolute;
    width: 200px;
    height: 105px;
    padding-top: 20px;
    font-family: Pacifico;
    background-color: #F7DC6F;
    transition: all 1s ease;
}
 
.actuc:hover {
    background-color: #F9E79F;
    transform: scale(1.25);
}

.actud {
    position: absolute;
    width: 200px;
    height: 105px;
    padding-top: 20px;
    font-family: Pacifico;
    background-color:#EB984E;
    transition: all 1s ease;
}
 
.actud:hover {
    background-color: #F0B27A;
    transform: scale(1.25);
}

.actue {
    position: absolute;
    width: 200px;
    height: 105px;
    padding-top: 20px;
    font-family: Pacifico;
    background-color: #AF7AC5;
    transition: all 1s ease;
}
 
.actue:hover {
    background-color: #C39BD3;
    transform: scale(1.25);
}

.actuf {
    position: absolute;
    width: 200px;
    height: 105px;
    padding-top: 20px;
    font-family: Pacifico;
    background-color: #EC7063;
    transition: all 1s ease;
}
 
.actuf:hover {
    background-color: #F1948A;
    transform: scale(1.25);
}

-
Edité par Blackbalrog 22 mars 2018 à 18:59:43

Rien n'est existentiel tous n'est qu'illusion

philiga

23 mars 2018 à 7:35:05

Est-ce que tu prends la peine de lire les réponses qu'on te fait ?

Je me répète:

"Je pense que les soucis quand ils apparaissent peuvent être liés aux "courts-circuits" que font tes multiples répétitions d'id.

Passe ton code au validateur, il va t'alerter: https://validator.w3.org/nu/#textarea

Un id doit absolument être unique par page. Hors tu as remis #front,#back,#right & #left à chaque cube.

Corrige cela en les numérotant."

Au lieu de les corriger, tu es passé de 3 fois trop à 6 fois trop ; tu crois que ça va arranger le problème?

-
Edité par philiga 23 mars 2018 à 7:36:55

"La Vérité doit être dite, le monde dût-il en voler en éclats" (J. G. Fichte)

Blackbalrog

23 mars 2018 à 12:03:01

haaa s'il te plait t’énerve

pas je m excuse oui j'ai numéroter je les ai renommer ect tous mes ID en double et sa bug toujours au pire se que je peux faire c est que je peux essayer toutes le possibilité

et même les changer en class mais s'il te plait t’énerve pas je suis encore débutant dans le domaine de la 3D et notamment les ID.

Rien n'est existentiel tous n'est qu'illusion

philiga

23 mars 2018 à 12:47:15

Je me suis un peu agacé, j'avoue, en voyant revenir le même code dédoublé avec les mêmes répétitions d'id.

Il faut parfois mettre les points sur les I...D ici !

J'espère ne t'avoir pas trop stressé !

Il est possible que ton bug ne vienne pas de là, mais il est sûr que ce problème des id est à régler de toutes façons.

Avec le css apuré que j'ai remis plus haut, je n'ai pas pu reproduire le problème, cela dit.

Est-ce que tu as le problème sur cette maquette: http://jsbin.com/fakarid/1/edit?html,output

(Pour la phase de mise au point, tu peux rester à une version courte de 3 cubes.)

"La Vérité doit être dite, le monde dût-il en voler en éclats" (J. G. Fichte)

Blackbalrog

23 mars 2018 à 16:13:04

non je n'ai pas le problème sur cette maquette mon problème vient des autre face lorsque je veux les faire zoomer

edit sinon j ai pensé mettre une div tous les 3 cubes

édit encore: sur la face arrière je n ai pas le problème de zoom

-
Edité par Blackbalrog 23 mars 2018 à 16:16:39

Rien n'est existentiel tous n'est qu'illusion

cube en 3d

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.

× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.

cube en 3d

cube en 3d

Supprimer

Modérer

Signaler le message aux modérateurs